I've two div elements that both need to have a min-height of 100%, but I can't seem to get the inner element to meet that 100% min-height. This isn't a bug in Firefox, Chrome does it too, so something in my CSS is messed up.

This code lets the outer div reach 100% height, but not the inner div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Wrapper 100% min-height Example.</title>
    <style type="text/css">
      html, body { padding: 0; margin: 0; height: 100%; }
      #wrapper {
        border-left: medium solid navy;
        border-right: medium solid navy;
        min-height: 100%;
        margin: 0 auto;
        width: 80%;
      }
      #content {
        border-left: thin solid red;
        border-right: thin solid red;
        min-height: 100%;
      }
      p { margin: 0; }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <p>Lipsum dolor...</p>
      </div>
    </div>
  </body>
</html>

Addendum: In my tests Chrome and Firefox fail this, yet Opera displays this markup correctly?

Edit:

In answer to:

I suppose the real question is why you want 100% high? if you want visual effects that stretch the full height of the viewport, then use a background image on body and tile it?

I want both wrappers 100% high so that I didn't need a background image. But at this point, CSS wasn't doing what I wanted it to (and images will be lighter weight than the code will be to get it right). Technically, this shouldn't be as difficult as it turned out to be.

  • 100% high of a viewport isn't web thinking - the media isn't fixed, and there are so many permutations for how your content can be viewed. I have browser windows on my Mac pro at 1400px tall and on my iPhone at less than 400px tall. even if you got 100% of initial viewport to work, if I resize my window, then what? Tony Crockford about 5 years ago

4 answers

4
points

See W3C CSS Spec and this. The child element inherits the height of the parent container only if it is specified explicitly. But min-height is not an explicit specification of height, so the computed height is "auto" and not 100%.

Answered about 5 years ago by Divya Manian
  • Okay, so then how do you get the wrapper to scale to contain the content when the content is larger than the wrapper? Declaring height to be 100% means it will end when the content continues. The Wicked Flea about 5 years ago
  • The question is why you would need that. There are other ways to give an illusion of 100% height. Divya Manian about 5 years ago
1
point

Divya has the answer, you'd need to set height:100%; on the wrapper to get the content 100% as well.

I suppose the real question is why you want 100% high? if you want visual effects that stretch the full height of the viewport, then use a background image on body and tile it?

Answered about 5 years ago by Tony Crockford
0
points

I am astounded, after a fair amount of reading on Google at the number of people, like Divya and Tony above, who don't properly understand the problem.

Let's hypothesise for a brief moment. Leaving aside any personal feelings about the proposed design, let's assume we would like to have two graphics appear on the page as background images on the body of the document. These images are to appear at the bottom left and bottom right corner of the document and need to be flush with the bottom. They need to sit at the bottom of the page if the content on that page is short and not extending beyond the viewport, and also at the bottom of the page if the content is long and extends beyond the viewport. Both images need to sit on a coloured background. Colour also needs to extend the full height of the page.

Now that we are clear on the specifications for this layout...

Here are the problems.

  • Not having full support for multiple background images (only Safari at this point) means that each image will need to be sitting as a background in it's own div.
  • as per CSS definitions, setting the height:100%; to these divs will resolve the issue of the images sitting correctly on short pages, however on a long page, the images will sit only as far down the page as the viewport and scrolling down to view the rest of the content will not show the background as intended.
  • Setting min-height:100%; on the outermost div will position it correctly, as both the BODY and the HTML tags have a height of 100%, however, the second div contained within the first doesn't position correctly. This is the issue raised by the initial poster. This is not something that can be solved with a tiled background image (thanks Tony) nor is this about giving an illusion of 100% height (Divya)
  • resizing the browser window in any direction should result in the two images also moving to alway remain in the bottom left and right corners of the document.

Fear not... I have a solution, but it requires Javascript - specifically in this case some JQuery.

The solution

<!doctype html>
<html>
  <head>
    <title>Irrelevant - stop reading this</title>
 <!-- include the JQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <style type="text/css">
  /* all of this of course goes in your style-sheet, not the document*/
  /* set the document to be atleast as high as the viewport */
      html, body {height:100%;} 
      #wrap1, #wrap2 {min-height:100%;} /* this will not work as expected until after some JS is applied */
  /*apply color and first background image bottom left */
      #wrap1 {background: #06c url(/path/to/first-image.gif) left bottom no-repeat;}
  /*second image added*/ 
      #wrap2 {background:url(/path/to/second-image.gif) right bottom no-repeat:} 
      #content {padding:40px;} /* some padding around our content */
    </style>
  </head>
  <body>
    <div id="wrap1">
      <div id="wrap2">
        <div id="content">
          <p>Some content here</p>
        </div>
      </div>
    </div>
<!-- JQuery code goes here -->
    <script>
     // height hack for background images 

  docHeight = $(document).height();
  viewHeight = $(window).height();

  if (docHeight >= viewHeight) {
    $('#wrap1').css('height', docHeight);
  } else {
    $('#wrap1').css('height', viewHeight);
  };

      // My JQuery is a little rusty, there is probably a faster, more efficient way of writing this if/then statement.


    </script>
  </body>
</html>

This solution uses JQuery to read the height of the page and the hieght of the window, determine which is longer and then apply that height as a CSS style directly to the wrap1 div. doing this forces the second wrap div to now have a determined height to work with and the min-height declaration now works correctly.

You may need to add the height:auto !important; hack for the benefit of IE6 into your IE6 stylesheet, but otherwise this should work.

Anyone not using Javascript will ofcourse not see this correctly, so make sure you aply some graceful degradation if you prefer.

Hopefully this has helped you out. After much much research it truly appears there is no pure CSS solution to this.

Cheers.

Answered over 3 years ago by Mike Baxter
ayyash 0
0
points

try adding this:

html, body {
    height: 100%;
}
Answered about 5 years ago by ayyash
  • See my revision, it only works for the first element not a second div needing 100% min-height too. :/ The Wicked Flea about 5 years ago