For Div to Extend Full Height

For div to extend full height

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>

Expanding a div to be its max height with height 100%

max-height will cap the DIV's height at 500px but allow it to be smaller if it does not take up 500px.

height: 100% will inherit the height from the parent element's height.

Use height: 500px if you want the DIV to be 500px in height.

I have included an example. For both the .outer and .inner DIVs un-comment or comment out the height values. You will see that if the height of the parent DIV is not set, then height: 100% will not match the height of the parent and will default to it's own content's height.

.outer {

    background-color: blue;

    height: 100px;

}

.inner {

    background-color: red;

    color: white;        

    /*height: 100%;*/

    text-align: center;

    width: 50%;    

}

<div class="outer">

    <div class="inner">

        Inner

    </div>

</div>

How to extend a div to fill the whole page

remove floats, you can add height to your columns 100vh but in your head section of the page should be <meta name="viewport" content="width=device-width, initial-scale=1">

* {

  padding: 0;

  margin: 0;

}

html,

body {

  height: 100%;

  display: flex;

  flex-direction: column;

  overflow: hidden;

}

body>* {

  flex-shrink: 0;

}

.row {

  display: flex;

}

.login-column {

  flex: 0 0 50%;

  background-color: #F4F6F9;

  margin: 0;

  height: 100vh;

}

.news-column {

  flex: 0 0 50%;

  background-color: #75BFF0;

  /* For browsers that do not support gradients */

  background-image: linear-gradient(to bottom right, #75BFF0, #C9E7FF);

  /* Standard syntax (must be last) */

  margin: 0;

  height: 100vh;

}

<div class="row">

  <div class="login-column">

    <h1>Login</h1>

  </div>

  <div class="news-column">

    <h1>News</h1>

  </div>

</div>

How do I force a DIV block to extend to the bottom of a page even if it has no content?

Your problem is not that the div is not at 100% height, but that the container around it is not.This will help in the browser I suspect you are using:

html,body { height:100%; }

You may need to adjust padding and margins as well, but this will get you 90% of the way there.If you need to make it work with all browsers you will have to mess around with it a bit.

This site has some excellent examples:

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

I also recommend going to http://quirksmode.org/

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,

body {

  height: 100%;

  margin: 0;

}

.box {

  display: flex;

  flex-flow: column;

  height: 100%;

}

.box .row {

  border: 1px dotted grey;

}

.box .row.header {

  flex: 0 1 auto;

  /* The above is shorthand for:

  flex-grow: 0,

  flex-shrink: 1,

  flex-basis: auto

  */

}

.box .row.content {

  flex: 1 1 auto;

}

.box .row.footer {

  flex: 0 1 40px;

}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">

  <div class="row header">

    <p><b>header</b>

      <br />

      <br />(sized to content)</p>

  </div>

  <div class="row content">

    <p>

      <b>content</b>

      (fills remaining space)

    </p>

  </div>

  <div class="row footer">

    <p><b>footer</b> (fixed height)</p>

  </div>

</div>

make div's height expand with its content

You need to force a clear:both before the #main_content div is closed. I would probably move the <br class="clear" />; into the #main_content div and set the CSS to be:

.clear { clear: both; }

Update: This question still gets a fair amount of traffic, so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox:

body {

  margin: 0;

}

.flex-container {

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}

header {

  background-color: #3F51B5;

  color: #fff;

}

section.content {

  flex: 1;

}

footer {

  background-color: #FFC107;

  color: #333;

}

<div class="flex-container">

  <header>

    <h1>

     Header   

    </h1>

  </header>

  <section class="content">

    Content

  </section>

  <footer>

    <h4>

      Footer

    </h4>

  </footer>

</div>

make full height div in html and css

If you just wanted to address the hight issue you could use vh combined with calc.

.header {
   height: 60px;
}

.content {
  height: calc(100vh -60px);
}

this would fill the height of the page minus 60px.

Heres an example;
https://jsfiddle.net/0ndbw3to/

How to force child div to be 100% of parent div's height without specifying parent's height?

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721

I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

Div height 100% and expands to fit content

Here is what you should do in the CSS style, on the main div

display: block;
overflow: auto;

And do not touch height

For Div to Extend Full Height