Div Height 100% and Expands to Fit Content

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

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>

MUI: div height - expand to fit content

Just set up the height of a Card component to fit-content and delete the hardcoding height from every component inside the Card:

Demo

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.

Why doesn't height: 100% work to expand divs to the screen height?

In order for a percentage value to work for height, the parent's height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you've given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

* { padding: 0; margin: 0; }

html, body, #fullheight {

    min-height: 100% !important;

    height: 100%;

}

#fullheight {

    width: 250px;

    background: blue;

}

<div id=fullheight>

  Lorem Ipsum        

</div>

Keeping a div at full height when it doesn't fit in viewport

Use the min-height property rather than the height property.

When you set height: 100% on the element with the background, it will have a height of 100% of the parent element. Since the parent element's height is equal to the height of the viewport, it won't work as expected. Since you don't want the element's maximum height to be the same as the viewport, a min-height work better.

Updated Example

div {
    position: relative;
    width: 200px;
    min-height: 100%;
    margin: 0 auto;
}

As a side note, you can also use viewport-percentage units:

Example Here

div {
    position: relative;
    width: 200px;
    min-height: 100vh;
    margin: 0 auto;
}

100% height div wrapper expand with 100% height children

Set height in viewport units on the child divs

.child {
  height:100vh;
}

Demo (with viewport units)

(NB: The OP is actually interested in background image on the wrapper instead of the solid aqua color)

html,

body {

  height: 100%;

}

#wrapper {

  background: aqua;

}

.child {

  height: 100vh;

}

<div id="wrapper">

  <div class="child">div1</div>

  <div class="child">div2</div>

</div>

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>

Each section must have at least 100% height

You can also make section 100% height with js

$(window).on("resize", function () {

  var fullHeight = $(window).height();

  $('section').height(fullHeight);

}).resize();

.s-one {

  background: blue;

}

.s-two {

  background: green;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="s-one"></section>

<section class="s-two"></section>

Div Height 100% and Expands to Fit Content