I'm having quite a frustrating problem. What I'm trying to do is make a div "#generic-div" with a height of 20% of the page height, and also set a footer that always sticks to the bottom of the page*; the two seem to be mutually exclusive.
*By "page", I don't mean the currently visible rectangle that is displayed in the window - I mean everything that it is possible to view by scrolling horizontally or vertically, so #footer {position: fixed; bottom: 0;} isn't a solution. The footer must always be under my div .container.
This is my application.html.erb:
<!DOCTYPE html>
<html>
<!-- ... -->
<body>
<div class="container"><%= yield %></div>
<div id="footer"></div>
</body>
</html>
html {height: auto, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
The HTML fills all the available space in the page, and #footer is pushed down as far as it can go. However, #generic-div has no explicit parent-element height to inherit its height from, so its height is 0.
html {height: 100%, width: 100%;}
#generic-div {height: 20%;}
#footer {top: 0;}
#generic-div's height is set to 20% of the page, but now html's height is just the height of the browser window, so #footer is set just below the bottom border of the browser window, and when I scroll down, more content is revealed under the footer. I would like the footer to be the bottom-most content.
How can I accomplish the height: 20% div and the footer on the bottom?
Please let me know if any part of my question was unclear, and I will try to clarify.
Ok. I understand what you are trying to do. This is what you are looking for. Answer has been tested on fiddle and code is below for your convenience. The issue you are having is that the body html element is everything. The HTML element is just the visible space. So the solution. Just don't apply 100% to the HTML tag, just the BODY tag.
http://jsfiddle.net/qs3ydnyv/5/
CSS
body{
margin:0px;
padding:0px;
clear:both;
color:#000;
height:100%;
display:block;
}
.container{
height:80%;
width:100%;
background-color:#A00002;
display:block;
}
#footer{
width:100%;
height:20%;
background-color:#005C97;
display:block;
}
HTML
<body>
<div class="container">Here is some Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed matda vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quamm ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, imperdiet vitae vehicula quis, cursus ac risus. Nullam nibh ligula, rhoncus ut velit id, dignissim posuere diam. Donec ante justo, gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque.
</div>
<div id="footer">gravida vel dolor quis, semper blandit turpis. Aliquam posuere iaculis nunc, sed mattis velit lacinia sit amet. Sed sed urna mattis, posuere libero id, consequat ante. Aliquam ac pretium lectus, eu semper dui. Aliquam maximus nibh nec elit sagittis, ac efficitur ipsum mattis. Fusce rhoncus rutrum mi a sollicitudin. Praesent non arcu non lectus pharetra tincidunt eu sit amet leo. Aenean eu elementum tortor. Sed id erat quis nibh aliquet hendrerit. Phasellus tempus quam id arcu consequat, nec porttitor nisl molestie. Ut quam ligula, suscipit quis aliquet eu, eleifend at neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ex sem, </div>
</body>