Fix the height of the container to Vegas in a div.

dist/vegas.css

@@ -1,5 +1,5 @@
-.vegas-wrapper,
 .vegas-overlay,
+.vegas-content-scrollable,
 .vegas-timer,
 .vegas-slide,
 .vegas-slide-inner {
@@ -14,6 +14,12 @@
     margin: 0;
 }
 
+.vegas-content-scrollable {
+    position: relative;
+    height: 100%;
+    overflow: auto;
+}
+
 .vegas-overlay {
     opacity: .5;
     background: transparent url("overlays/02.png") center center repeat;

dist/vegas.js

@@ -126,7 +126,8 @@
 
   Vegas.prototype = {
     _init: function () {
-      var $wrapper,
+      var $content,
+        $contentScroll,
         $overlay,
         $timer,
         isBody  = this.elmt.tagName === 'BODY',
@@ -137,22 +138,26 @@
       // Preloading
       this._preload();
 
-      // Wrapper with content
+      // Div with scrollable content
       if (!isBody) {
-        $wrapper = $('<div class="vegas-wrapper">')
+        $contentScroll = $('<div class="vegas-content-scrollable">');
+
+        $content = $('<div class="vegas-content">')
           .css('overflow', this.$elmt.css('overflow'))
           .css('padding',  this.$elmt.css('padding'));
 
+        this.$elmt.css('padding', 0);
+
         // Some browsers don't compute padding shorthand
         if (!this.$elmt.css('padding')) {
-          $wrapper
+          $content
             .css('padding-top',    this.$elmt.css('padding-top'))
             .css('padding-bottom', this.$elmt.css('padding-bottom'))
             .css('padding-left',   this.$elmt.css('padding-left'))
             .css('padding-right',  this.$elmt.css('padding-right'));
         }
 
-        this.$elmt.clone(true).children().appendTo($wrapper);
+        this.$elmt.clone(true).children().appendTo($content);
         this.elmt.innerHTML = '';
       }
 
@@ -179,7 +184,8 @@
       this.$elmt.addClass('vegas-container');
 
       if (!isBody) {
-        this.$elmt.append($wrapper);
+        this.$elmt.append($contentScroll);
+        $contentScroll.append($content);
       }
 
       setTimeout(function () {

src/sass/main/vegas.sass

@@ -1,5 +1,5 @@
-.vegas-wrapper,
 .vegas-overlay,
+.vegas-content-scrollable,
 .vegas-timer,
 .vegas-slide,
 .vegas-slide-inner
@@ -13,6 +13,11 @@
     padding: 0
     margin: 0
 
+.vegas-content-scrollable
+    position: relative
+    height: 100%
+    overflow: auto
+
 .vegas-overlay
     opacity: .5
     background: transparent url('overlays/02.png') center center repeat

src/vegas.js

@@ -117,7 +117,8 @@
 
   Vegas.prototype = {
     _init: function () {
-      var $wrapper,
+      var $content,
+        $contentScroll,
         $overlay,
         $timer,
         isBody  = this.elmt.tagName === 'BODY',
@@ -128,22 +129,26 @@
       // Preloading
       this._preload();
 
-      // Wrapper with content
+      // Div with scrollable content
       if (!isBody) {
-        $wrapper = $('<div class="vegas-wrapper">')
+        $contentScroll = $('<div class="vegas-content-scrollable">');
+
+        $content = $('<div class="vegas-content">')
           .css('overflow', this.$elmt.css('overflow'))
           .css('padding',  this.$elmt.css('padding'));
 
+        this.$elmt.css('padding', 0);
+
         // Some browsers don't compute padding shorthand
         if (!this.$elmt.css('padding')) {
-          $wrapper
+          $content
             .css('padding-top',    this.$elmt.css('padding-top'))
             .css('padding-bottom', this.$elmt.css('padding-bottom'))
             .css('padding-left',   this.$elmt.css('padding-left'))
             .css('padding-right',  this.$elmt.css('padding-right'));
         }
 
-        this.$elmt.clone(true).children().appendTo($wrapper);
+        this.$elmt.clone(true).children().appendTo($content);
         this.elmt.innerHTML = '';
       }
 
@@ -170,7 +175,8 @@
       this.$elmt.addClass('vegas-container');
 
       if (!isBody) {
-        this.$elmt.append($wrapper);
+        this.$elmt.append($contentScroll);
+        $contentScroll.append($content);
       }
 
       setTimeout(function () {