How to set height with percentage when html height is auto?

Question

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>

When I do this:

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.

When I do this:

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.

If you need to get the height of the entire document I think you need to use js — Huangism, Feb 05 '15 at 20:04
Is what your asking this: "How do I get my footer to stick to the bottom of the window, or below the content if the content is larger than the window height?" — Ted, Feb 05 '15 at 20:38
@Ted That's exactly what I want to do, along with scale div heights relative to the page height. — Jeff Caros, Feb 06 '15 at 14:44
For later reading: http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height — Jeff Caros, Feb 06 '15 at 16:45

technology101010 · Accepted Answer · 2015-02-11T21:21:25.060

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>

In this fiddle the `html` height is 100%, meaning it will be set to the height of the open window. I want `html` to expand to fill all the space it possibly can; in other words, every last pixel of content on the page should be contained within `html`. — Jeff Caros, Feb 06 '15 at 14:47
I think you're misunderstanding what I'm trying to do. I want `html` to fill _all the space that is possibly can_. In your fiddle, `html` is set to 100%, which means that it only fills the visible window. If I added so much content that some of that content was hidden because the window wasn't big enough, and then I scrolled down to reveal the initially hidden content, then `html` should extend all the way down to the end of the content. In your fiddle, `html` would end before the initially hidden content. Was that clear? — Jeff Caros, Feb 11 '15 at 19:46

How to set height with percentage when html height is auto?

When I do this:

When I do this:

1 Answers1