Question

I have a DIV container, .floatingPage, which is positioned absolutely over two other DIV containers .top and .bottom. My problem is that the contents of the .floatingPage element are dynamic and sometimes contain a lot of data, which extends .floatingPage below the visible part of the screen.

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top:50px; 
}

<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>

Now, because I know my app’s users use JS (company control panel), I have been calculating the height of the .floatingPage element and extending the height of .bottom to suit the new contents. This has been OK until now and has started to cause problems. Plus, I don’t want to do this hack for other projects that have users without JS.

I need this floatingPage element to float over the top of the other two – that’s the whole point of site’s design. How can I keep this affect but prevent it from running off the page, without JS?

Answer 1

Try this:

.top { 
  height:350px; 
  background:'images/background.png'; 
  position:relative; 
}

.bottom { 
  height:350px; 
  background:#F1F1F1; 
}

.floatingPage { 
  position:absolute; 
  top      : 50px; 
  bottom   : 50px;
  overflow : auto;
}

<div class="top">
    <div class="floatingPage">
        // blah blah blah (lots of data)
    </div>
</div>