90

Is there a method I can use for a div to extend to full height? I've got a sticky footer in it as well.

Here's the web page: Website removed. The middle bit I'm talking about is the white div, midcontent which has CSS values:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

So yes, obviously height:100% didn't work. Additionally, ALL parent containers have height set.

Here's the general structure

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>
4
  • This is a VERY common question, your solution will almost definitely be found in other answers: stackoverflow.com/search?q=css+div+100 or stackoverflow.com/search?q=css+div+height
    – Ben
    Dec 27, 2010 at 0:31
  • 3
    I've trawled through, most of them say the same thing. I've applied what has been said, still not fixed.
    – bear
    Dec 27, 2010 at 0:43
  • 1
    I'm not sure if your question is clear enough. Are you looking for something that makes "midcontainer" take the full remaining space between "headout" and "footer"? Because that certainly is not equal to 100% Dec 28, 2010 at 23:36
  • stackoverflow.com/a/60403264/470749 was helpful for me in expanding a div to fill the remaining window height.
    – Ryan
    Jan 27, 2021 at 15:05

5 Answers 5

143

Did you remember setting the height of the html and body tags in your CSS? This is generally how I've gotten DIVs to extend to full height:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>



4
  • I have the same problem, but although I have set the body height to 100%, it does not work. link If you click on portfolio, pick a category, and then click on a thumbnail, a slideshow appears. The background of the slideshow does not extend to the whole page, although its height is set as 100%. Jan 27, 2014 at 16:04
  • 2
    I think that the code is correct, but the question is wrong: it should ask whether you set the body AND html tags to 100%. Because somehow the html tag can also affect the output in different ways... Feb 4, 2014 at 4:45
  • 2
    Somehow html 100% seems to only capture the visible screen. Using chrome devtool, when I select the "html" element it ends at the end of the visible page, when I scroll down it's as if it's no longer part of <html>
    – Nathan H
    Oct 22, 2015 at 8:01
  • 1
    what about using vh?
    – mfnx
    Aug 28, 2018 at 23:15
40

This might be of some help: http://www.webmasterworld.com/forum83/200.htm

A relevant quote:

Most attempts to accomplish this were made by assigning the property and value: div{height:100%} - this alone will not work. The reason is that without a parent defined height, the div{height:100%;} has nothing to factor 100% percent of, and will default to a value of div{height:auto;} - auto is an "as needed value" which is governed by the actual content, so that the div{height:100%} will a=only extend as far as the content demands.

The solution to the problem is found by assigning a height value to the parent container, in this case, the body element. Writing your body stlye to include height 100% supplies the needed value.

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
5
  • 2
    Hi, all parents containers have height:100%.
    – bear
    Dec 27, 2010 at 0:30
  • 2
    @Shamil, All parents including the html tag? That may have been your problem. I most often forget about the html tag as a graphical tag. Feb 4, 2014 at 4:50
  • 1
    @AlexisWilke yep, it did - rarely do I not include html tags
    – bear
    Feb 5, 2014 at 13:15
  • 3
    Including the form tag to my surprise
    – Adam
    Apr 3, 2015 at 10:50
  • the key element is the 100% height on the body AND html tags
    – luismesas
    Jan 23, 2017 at 2:17
13

This is an old question. CSS has evolved. There now is the vh (viewport height) unit, also new layout options like flexbox or CSS grid to achieve classical designs in cleaner ways, like this:

<html>
  <head>
    <style type="text/css">
      html,body { margin: 0px; padding: 0px; }
      #full { 
        background: #0f0; 
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="full"></div>
  </body>
</html>

This is not the exact same layout as in your question but has the benefit that the content of the page can also get longer than 100%.

As the time of this writing, iOs Safari will still show at scrollbar at 100vh. You may want to add min-height: -webkit-fill-available;. More details with this StackOverflow question.

2
  • 1
    Please provide and example. How are we going to copy/paste without it? :P
    – CpILL
    Nov 21, 2022 at 22:26
  • Aye sir. Code example added. Nov 23, 2022 at 8:27
3

In case also setting the height of the html and the body to 100% makes everything messier for you as it did for me, the following worked for me:

height: calc(100vh - 33rem)

The - 33rem is the height of the elements coming after the one we want to take full height, i.e., 100vh. By subtracting the height, we will make sure there is no overflow and it will always be responsive (assuming we are working with rem instead of px).

1
  • Just make sure you don't do height: calc(100vh -33rem) where the negative sign touches the value as that will be invalid CSS. Also 33rem could be replaced by a pixel value as well. Jul 30, 2020 at 16:47
2

if setting height to 100% doesn't work, try min-height=100% for div. You still have to set the html tag.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.