Positioning multiple sections with independent overflows in HTML - html

Question

I'm constructing a page that contains multiple different sections that all change contents dynamically, but I want them to be a fixed size and show a scroll bar (for only that section) if there is an overflow.
In practice I have three primary sections (div); two which should satisfy the fixed size and overflow properties, and one that acts as a footer and should be fixed to the bottom of the screen and never change size.
My problem is that I can't seem to figure out how to order and position these sections without them overlapping each other or the overflow not working as intended.
Basically I want the footer to just occupy the space it needs but always be bounded to the bottom of the screen. The other two sections should then occupy 50% of the rest of the page each. There should never be a need for a scroll bar to the page itself - but rather one for each of the two sections, since their contents vary and can overflow.
I have tried many different solutions, but here is a simplified example on what I have been working with:
Very quick mock up
<div id="page" style="position:relative; margin-top:45px">
<div id="wrapper" style="height:100%; margin-bottom:3.5em">
<div id="block-a" style="height:50%; overflow: auto; padding:0; position:relative">
<h2>...</h2>
<br/>
<div id="dynamicGrid"></div>
<br/>
<button>...</button>
</div>
<div id="block-b" style="height:50%; padding:0; position:relative">
<div style="padding-bottom:0">
<ul id="listHeader">
<li id="header">...</li>
<li id="addNew">
<a>...</a>
</li>
</ul>
</div>
<div id="listSection" style="overflow: auto">
<ul id="list"></ul>
</div>
</div>
</div>
<div id="footer" style="position:fixed; left:0; right:0; bottom:0">
<ul>
<li>
<label>...</label>
<label>...</label>
<label>...</label>
</li>
</ul>
</div>
</div>
The 'page' div is positioned relative to the body with also contains the header (45 px from top). The list with id 'list' is the list that gains list elements dynamically, and the div 'dynamicGrid' contains a bunch of selects, inputs and labels.
The div 'listSection' is what I want to overflow independently and this is the case for 'block a' as well.
A big problem I keep encountering is that I can't seem to define the space left after the footer has been created. In theory I want something like height:100%-sizeOf(footer)...
An important rule as well, is that this page has to work in most major browsers, and has to 'work' on different screen sizes (I want to avoid using px too much, but rather %)
For now I use inline html styling, but an answer using CSS is also fine.
I use JavaScript and Jquery to control the page, but the layout should be set using html.

Answer 1

There are two methods of doing this:
JavaScript / jQuery
Plain CSS (uses vh, but IE support is sketchy)
Method 1
JavaScript / jQuery
Check out this JSFiddle
Basically it uses jQuery to calculate the height of the body and remove the height of the footer, then it divides that by 2 to get the height of each block
Here is the JavaScript / jQuery code:
// Set the height of the #page element to be the full height of the window
$('#page').height($(window).height() + 'px')
// Save page height
var page_height = $('#page').height()
// Save page height - footer height
var height_without_footer = page_height - $('#footer').height()
// Calculate the size of each block
var block_height = height_without_footer / 2
// Set each block height
$('.block').css('height', block_height + 'px')
Here was the CSS I used (it is pretty much what you had, just in a stylesheet rather than inline). The only thing I changed was I added overflow: scroll to make sure the .blocks got scroll bars and did not resize, or their content overlap:
#footer {
background-color: #000;
color: #FFF;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.block {
overflow: scroll;
padding: 5px;
}
/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
margin: 0;
}
Method 2
Plain CSS (vh)
You can also use Viewport Units (set size relative to viewport), but IE support is sketchy
Here is a JSFiddle
It uses the following CSS:
#footer {
background-color: #000;
color: #FFF;
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: 10vh;
}
.block {
overflow: scroll;
padding: 5px;
height: 45vh;
}
/* Just to remove default CSS added by JSFiddle and browsers */
body, h1 {
margin: 0;
}
The vh stands for Viewport Height (you can also use vw for Viewport Width). The units must all add up to < or == to 100.
In this case each .block is 45vh, there are 2 blocks so 45 * 2 is 90
The #footer is 10vh
90vh + 10vh is 100vh, meaning the page will never be larger than the viewport.

Answer 2

Is this what you are looking for? Use width in vw unit so as to make it adaptable to any viewport width. Height can be dynamically calculated and assigned using jQuery.
$(document).ready(function() {
var windowHeight = $(window).height();
var footerHeight = $('#footer').height();
$('#container').height((windowHeight - footerHeight) + 'px');
$('#container1').height((windowHeight - footerHeight) / 2 + 'px');
$('#container2').height((windowHeight - footerHeight) / 2 + 'px');
});
body {
margin: 0px;
padding: 0px;
}
#footer {
position: absolute;
width: 100vw;
height: auto;
bottom: 0;
background: #ccc;
}
#container {
position: realtive;
}
#container1 {
width: 100vw;
background: #f1f1f1;
overflow: scroll;
}
#container2 {
width: 100vw;
background: #444;
color: white;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="container1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, nunc ac hendrerit imperdiet, risus est fermentum dui, a ornare lorem justo imperdiet diam. Proin id vestibulum nisl. Suspendisse potenti. Aenean eu elit hendrerit, semper sapien
nec, dignissim lorem. Quisque urna ante, hendrerit sed eros a, consequat viverra massa. Nulla egestas est quis sem scelerisque congue. Praesent faucibus sapien eros, et gravida ligula interdum eu. Proin aliquet urna eget convallis auctor. Donec ullamcorper
cursus fringilla. Morbi dapibus lorem in nisl vestibulum, volutpat tristique urna sagittis. Nunc id condimentum sem. Donec pulvinar vestibulum convallis. Vivamus sit amet orci ante. Donec pulvinar, libero at interdum feugiat, neque sem imperdiet turpis,
venenatis maximus ante justo nec augue. Praesent a hendrerit felis, sed mollis nulla. Aliquam fermentum accumsan leo, quis pulvinar mi egestas a. Aenean non odio mollis dui porta volutpat. Integer semper ante ac ligula vulputate pharetra. Pellentesque
et scelerisque leo. Aliquam congue blandit metus, quis interdum felis. Fusce suscipit ac leo in hendrerit. Nulla semper tempus felis finibus eleifend. In quis orci nunc. Donec imperdiet tellus et cursus semper. Vivamus mauris sem, dapibus at porta
viverra, mattis ut lorem. Suspendisse eleifend commodo nisl ultricies convallis. In fringilla mauris in urna elementum venenatis.
</div>
<div id="container2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper, nunc ac hendrerit imperdiet, risus est fermentum dui, a ornare lorem justo imperdiet diam. Proin id vestibulum nisl. Suspendisse potenti. Aenean eu elit hendrerit, semper sapien
nec, dignissim lorem. Quisque urna ante, hendrerit sed eros a, consequat viverra massa. Nulla egestas est quis sem scelerisque congue. Praesent faucibus sapien eros, et gravida ligula interdum eu. Proin aliquet urna eget convallis auctor. Donec ullamcorper
cursus fringilla. Morbi dapibus lorem in nisl vestibulum, volutpat tristique urna sagittis. Nunc id condimentum sem. Donec pulvinar vestibulum convallis. Vivamus sit amet orci ante. Donec pulvinar, libero at interdum feugiat, neque sem imperdiet turpis,
venenatis maximus ante justo nec augue. Praesent a hendrerit felis, sed mollis nulla. Aliquam fermentum accumsan leo, quis pulvinar mi egestas a. Aenean non odio mollis dui porta volutpat. Integer semper ante ac ligula vulputate pharetra. Pellentesque
et scelerisque leo. Aliquam congue blandit metus, quis interdum felis. Fusce suscipit ac leo in hendrerit. Nulla semper tempus felis finibus eleifend. In quis orci nunc. Donec imperdiet tellus et cursus semper. Vivamus mauris sem, dapibus at porta
viverra, mattis ut lorem. Suspendisse eleifend commodo nisl ultricies convallis. In fringilla mauris in urna elementum venenatis.
</div>
</div>
<div id="footer">
Footer
</div>