For div to extend full height

Question

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>

This is a VERY common question, your solution will almost definitely be found in other answers: http://stackoverflow.com/search?q=css+div+100 or http://stackoverflow.com/search?q=css+div+height — Ben, Dec 27 '10 at 00:31
I've trawled through, most of them say the same thing. I've applied what has been said, still not fixed. — bear, Dec 27 '10 at 00:43
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% — cesarsalazar, Dec 28 '10 at 23:36
https://stackoverflow.com/a/60403264/470749 was helpful for me in expanding a div to fill the remaining window height. — Ryan, Jan 27 '21 at 15:05
Additionally, try setting `height:auto` to child tag when the parent tag is set to `height:100vh`. — Ali Mert Çakar, Apr 13 '23 at 15:57

Tom · Accepted Answer · 2015-08-25T16:01:44.190

144

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>

edited Aug 25 '15 at 16:01

answered Dec 28 '10 at 22:58

Tom

18,685
15
71
81

I have the same problem, but although I have set the body height to 100%, it does not work. [link](http://www.cerensaner.com/) 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%. – sodiumnitrate Jan 27 '14 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... – Alexis Wilke Feb 04 '14 at 04: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 – Nathan H Oct 22 '15 at 08:01
1

what about using vh? – mfnx Aug 28 '18 at 23:15

score 40 · Answer 2 · edited Sep 08 '15 at 18:06

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%; 
}

edited Sep 08 '15 at 18:06

IMI

2,461
1
14
20

answered Dec 27 '10 at 00:27

Brian Clapper

25,705
7
65
65

2

Hi, all parents containers have `height:100%`. – bear Dec 27 '10 at 00: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. – Alexis Wilke Feb 04 '14 at 04:50
1

@AlexisWilke yep, it did - rarely do I not include html tags – bear Feb 05 '14 at 13:15
3

Including the form tag to my surprise – Adam Apr 03 '15 at 10:50
the key element is the 100% height on the body AND html tags – luismesas Jan 23 '17 at 02:17

Frank Lämmer · Answer 3 · 2022-11-23T08:26:36.943

14

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.

edited Nov 23 '22 at 08:26

answered Sep 19 '19 at 07:16

Frank Lämmer

2,165
19
26

1

Please provide and example. How are we going to copy/paste without it? :P – CpILL Nov 21 '22 at 22:26
Aye sir. Code example added. – Frank Lämmer Nov 23 '22 at 08:27

score 3 · Answer 4 · answered Jan 08 '20 at 16:10

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).

answered Jan 08 '20 at 16:10

Joehat

979
1
9
36

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. – Rich Finelli Jul 30 '20 at 16:47

score 2 · Answer 5 · answered Oct 05 '18 at 18:24

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;

}

For div to extend full height

5 Answers5

Linked

Related