Setting div 100% of window without content overflowing - html

Question

I am trying to set up my page layout to take up 100% of the screen but am running into problems with content overflowing into the footer.
Here's the code for the first example:
HTML:
<div class="container page-container">
<div class="page-leftSidebar">
<div class="sidebar" role="complementary">
<h4>Widget Title</h4>
</div>
<main class="post-wrapper" role="main">
<section class="entry-content">
<p>This makes the entire page 100% height, but <code>.post-wrapper</code> is not for some reason.</p>
</section>
</main>
</div>
</div>
<footer class="siteFooter">
<p>Copyright 2015 Me.</p>
</footer>
CSS:
/* Generic */
html,
body { height: 100%; }
body {
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
/* Containers */
.container {
margin: 0 auto;
width: 90%;
}
.page-container { min-height: 100%; }
/* Page Content */
.post-wrapper {
background-color: #fff;
min-height: 100%;
}
/* This is the row that will hold our two columns (sidebar and content) */
.page-leftSidebar {
width: 100%;
min-height: 100%;
}
.page-leftSidebar:after {
clear: both;
content:" ";
display: table;
}
.page-leftSidebar .sidebar { -webkit-background-clip: padding-box; }
#media (min-width: 60em) {
/* Page container */
.page-leftSidebar .post-wrapper {
-webkit-background-clip: padding-box;
min-height: 100%;
}
/* Left Sidebar */
.page-leftSidebar .sidebar {
float: left;
width: 19.25%;
}
/* Right Content */
.page-leftSidebar .post-wrapper {
float: left;
margin-left: 2%;
width: 78.75%;
}
}
/* Site Footer */
.siteFooter {
background-color: #2b303b;
color: #555555;
text-align: center;
padding-bottom: 50px;
padding-top: 50px;
}
/* FULL PAGE HEIGHT */
.container { min-height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
I got things kind of working here, but my .post-wrapper container is still not 100% height: http://jsfiddle.net/1re4vLq4/10/
However, the above example does work if there is a lot of content on the page: http://jsfiddle.net/1re4vLq4/9/ (Note: that both this and the above example are using min-height)
Then I got the entire page (including .post-wrapper) to be 100% height by using height instead of min-height: http://jsfiddle.net/9m1krxuv/4/
Changed CSS:
.container { height: 100%; }
.post-wrapper,
.page-leftSidebar,
.sidebar {
display: block;
position: relative;
height: 100%;
}
However, the problem with this is when there is a lot of content on the page, it overflows onto the footer (you can see this by making the result pane in JSFiddle smaller): http://jsfiddle.net/1re4vLq4/8/ Which shouldn't be the case (nor do I want to hide the text using overflow: hidden).
Any suggestions or ideas on how to go about fixing this? I'm looking for the entire page to be at least 100% height, including .post-wrapper (which is the right column with a white background).

Answer 1

If you have a "full-sized" container that you want to always match the height of the viewport - you're best not to add content that will overflow (go beyond) that div, as you're essentially defeating the purpose.
Short answer: Remove height: 100%; from your .container CSS rule.
I've created a basic Fiddle example combining full-viewport-height divs, and divs that just hold a lot of content.
HTML:
<div class="full-div red height-full">
<!-- Full sized div. Content should fit within the viewport -->
</div>
<div class="full-div blue">
<div class="inner-div">
<!-- Add long lorem ipsum here. -->
<!-- Notice that the parent div does not contain the height-full class -->
</div>
</div>
<div class="full-div green height-full">
<!-- This div will get "pushed down"only because the div above is NOT height 100% -->
</div>
CSS:
html,body{ height: 100%; margin: 0; padding: 0; }
.full-div { overflow: auto; }
.height-full { height: 100%; }
.inner-div { width: 90%; background-color: white; margin: 0 auto; }
.inner-div span { text-align: center; }
DEMO here: http://jsfiddle.net/175mrgzt/
Ultimately, when you set a DIV to 100% - its expected to be 100% of the viewport (graphical viewing region of the browser). Once you add content that extends that you're essentially going over 100% - and in that case, you might as well remove the set height, and let HTML make the adjustments for you.