CODEWITHSUNDEEP
cssheighttwitter-bootstrap-3
Quoter
Quoter

Reputation: 4302

height, min-height not working

I'm trying to make 2 div's inside a container div (from Twitter Bootstrap) take the max height which is 100%. I created a fiddle to demonstrate, but somehow it's not showing what I want.

Both div's are floated. And therefore I used class="clearfix". But that didn't work either. What am I missing?

EDIT What you don't see in the fiddle, is that html and body are already set to 100% height in my application.

EDIT The child div goes outside it's parent div, and that's why it keeps failing. The jsfiddle has been updated. Anyone can take a look at it?

Upvotes: 0

Views: 86

Answers (1)

kleinfreund
kleinfreund

Reputation: 6806

To make a nested block-level element take up 100% height even without any content inside of them, one needs to add height: 100%; to the element in question and all its parent elements (including html and body). See this demo.

Giving the divs a height works just fine, but because there is no content inside, the html and body elements don't stretch accordingly.

HTML:

<html>
  <body>
    <div class=container>
      <div class=stretch-this>
      </div>
    </div>
  </body>
</html>

CSS:

.stretch-this {
  background-color: khaki;
}

html,
body,
.container,
.stretch-this {
  height:100%;
}

Upvotes: 2

Related Questions