273

Here is the HTML:

<div id="outer">
    <div id="inner"></div>
    Test
</div>

And here is the CSS:

#inner {
  float: left;
  height: 100%;
}

Upon inspection with the Chrome developer tools, the inner div is getting a height of 0px.

How can I force it to be 100% of the height of the parent div?

10
  • 1
    So you want the text in the outer div (not in the inner div), but the floated inner div to be the height of the outer div?
    – edl
    Commented Jun 15, 2010 at 23:48
  • What is the end result you are trying to achieve? I guess my confusion lies in that if the inner div is as high as the outer and the outer is as high as the text, isn't that the same as having the text in the inner div?
    – edl
    Commented Jun 16, 2010 at 0:09
  • 2
    @edl: Yes, it is :) The reason I want it this way is that the inner div has an image as its background. The text needs to be beside it. Both need to be inside the outer div as it has a background image too. Commented Jun 16, 2010 at 0:24
  • 3
    Also see stackoverflow.com/questions/1122381
    – Chadwick
    Commented Jun 16, 2010 at 1:40
  • 2
    Seeing and trying the answers to this question was just depressing. Commented Mar 21, 2018 at 4:24

12 Answers 12

136

For the parent:

display: flex;

You should add some prefixes http://css-tricks.com/using-flexbox/

Edit: Only drawback is IE as usual, IE9 does not support flex. http://caniuse.com/flexbox

Edit 2: As @toddsby noted, align items is for parent, and its default value actually is stretch. If you want a different value for child, there is align-self property.

Edit 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/

7
  • 3
    You should point out that this works only in modern browsers, and even then requires vendor prefixes.
    – kontur
    Commented Jul 7, 2014 at 11:27
  • 12
    I'm surprised this solution hasn't received more attention, given that the original question requires the child div to be floated and all of the position:absolute solutions really throw a spanner in the works in most situations where you would be using float. This solution provides a great solution where the side-effects of position:absolute aren't an issue and if you're willing to dig a little further, it is possible to get some pretty good cross-browser compatibility.
    – Luke
    Commented Jan 24, 2015 at 8:00
  • This is the answer right here. IE9 will be going out soon enough, might as well help it along by giving it a good, solid kick. This solution is so nice, simple, and easy...I'm done hacking together alternative solutions. ;)
    – jrista
    Commented Mar 3, 2015 at 18:38
  • Thanks for this solution, works like a charm!, in my case I didn't need to use align-items: stretch, but display: flex did the trick.
    – Matias
    Commented Jun 26, 2015 at 18:27
  • 2
    According to the most recent spec for Flexbox: see w3.org/TR/css-flexbox-1/#align-items-property. align-items: stretch; isn't required as it is the default value. Also it should be defined on the parent not the child.
    – toddsby
    Commented Feb 1, 2017 at 14:24
125

For #outer height to be based on its content, and have #inner base its height on that, make both elements absolutely positioned.

More details can be found in the spec for the css height property, but essentially, #inner must ignore #outer height if #outer's height is auto, unless #outer is positioned absolutely. Then #inner height will be 0, unless #inner itself is positioned absolutely.

<style>
    #outer {
        position:absolute; 
        height:auto; width:200px; 
        border: 1px solid red; 
    }
    #inner {
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer'>
    <div id='inner'>
    </div>
    text
</div>

However... By positioning #inner absolutely, a float setting will be ignored, so you will need to choose a width for #inner explicitly, and add padding in #outer to fake the text wrapping I suspect you want. For example, below, the padding of #outer is the width of #inner +3. Conveniently (as the whole point was to get #inner height to 100%) there's no need to wrap text beneath #inner, so this will look just like #inner is floated.

<style>
    #outer2{
        padding-left: 23px;
        position:absolute; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2{
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
   }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
    text
</div>

I deleted my previous answer, as it was based on too many wrong assumptions about your goal.

8
  • 127
    Hmm.. the question was about Floated div's. You answered about absolutely position divs
    – Mihkel L.
    Commented Jul 18, 2014 at 10:38
  • 59
    I never stop surprising how complex it is to achieve insanely simple things in HTML/CSS :) Commented Oct 7, 2014 at 16:09
  • 15
    Any way to do this without hardcoding widths? Not great for responsive containers. Commented Jul 13, 2015 at 4:01
  • 25
    I don't know why this was accepted and upvoted so much. The question is about floated divs, which is what brought me here from my search, and instead this answers absolutely positioned divs.
    – Matt K
    Commented Jan 29, 2016 at 18:47
  • 2
    How to make a floated container vertically fit it's container? By not making it float anymore! Haha. Nice try, and close enough to be considered useful, actually.
    – Rolf
    Commented Nov 10, 2016 at 10:39
77

Actually, as long as the parent element is positioned, you can set the child's height to 100%. Namely, in case you don't want the parent to be absolutely positioned. Let me explain further:

<style>
    #outer2 {
        padding-left: 23px;
        position: relative; 
        height:auto; 
        width:200px; 
        border: 1px solid red; 
    }
    #inner2 {
        left:0;
        position:absolute; 
        height:100%; 
        width:20px; 
        border: 1px solid black; 
    }
</style>

<div id='outer2'>
    <div id='inner2'>
    </div>
</div>
4
  • 14
    Cool, this is less limiting than Chadwick's requirement of position:absolute (which could interfere with a site's styles)
    – henry
    Commented May 16, 2013 at 5:01
  • 3
    It could be just me, but I have problems if the sidebar is larger than the content. A background color will stop at the parent container but the sidebar content will overflow outside the parent. Commented Apr 29, 2014 at 16:17
  • This is a much more flexible solution, and even if you have several floated child elements, it seems an acceptable drawback to style their offset absolutely positioned. +1
    – kontur
    Commented Jul 7, 2014 at 11:26
  • Thank you very much. I've posted my specific solution as an answer to another question on SO: stackoverflow.com/a/31749164/84661. Commented Jul 31, 2015 at 14:53
25

As long as you don't need to support versions of Internet Explorer earlier than IE8, you can use display: table-cell to accomplish this:

HTML:

<div class="outer">
    <div class="inner">
        <p>Menu or Whatever</p>
    </div>
    <div class="inner">
        <p>Page contents...</p>
    </div>
</div>

CSS:

.inner {
    display: table-cell;
}

This will force each element with the .inner class to occupy the full height of its parent element.

2
  • Although this will work, it won't show a margin, even if you specify one. So this solution will fail if you want to assign a margin. You can assign padding as a work-around, but how would you solve this if you needed a margin (& not padding)?
    – Devner
    Commented Sep 2, 2013 at 12:10
  • 14
    Am I missing something here? Your question asks for a floated element to have height 100%. When floated, a display: table-cell; element doesn't fill the height of its container any more? I must be missing something, because it's your own question...? Commented Apr 25, 2016 at 0:26
17

I made an example resolving your problem.

You have to make a wrapper, float it, then position absolute your div and give to it 100% height.

HTML

<div class="container">
    <div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
  <div class="right-wrapper">
    <div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
  </div>
  <div class="clear">&nbsp;</div>
</div>

CSS:

.container {
    width: 100%;
    position:relative;
}
.left {
    width: 50%;
    background-color: rgba(0, 0, 255, 0.6);
    float: left;
}
.right-wrapper {
    width: 48%;
    float: left;
}
.right {
    height: 100%;
    position: absolute;
}

Explanation: The .right div is absolutely positioned. That means that its width and height, and top and left positiones will be calculed based on the first parent div absolutely or relative positioned ONLY if width or height properties are explicitly declared in CSS; if they aren't explicty declared, those properties will be calculed based on the parent container (.right-wrapper).

So, the 100% height of the DIV will be calculed based on .container final height, and the final position of .right position will be calculed based on the parent container.

1
  • 1
    This is a solid solution for situations in which you can guarantee that the .right column's content is shorter than the .left column's content. For example, if you are using this on a component in which the .left column has some variably sized content and the right column simply displays an arrow to a detail page then this solution works well. +1 for that Commented Mar 24, 2015 at 16:44
16

Here it is a simpler way to achieve that:

  1. Set the three elements' container (#outer) display: table
  2. And set the elements themselves (#inner) display: table-cell
  3. Remove the floating.
  4. Success.
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Thanks to @Itay in Floated div, 100% height

6

If you're prepared to use a little jQuery, the answer is simple!

$(function() {
    $('.parent').find('.child').css('height', $('.parent').innerHeight());
});

This works well for floating a single element to a side with 100% height of it's parent while other floated elements which would normally wrap around are kept to one side.

Hope this helps fellow jQuery fans.

6
  • 21
    It seems overkill to throw javascript at this layout problem.
    – kontur
    Commented Jul 7, 2014 at 11:28
  • 2
    As someone who is having to develop in IE: THANK YOU!
    – Rook
    Commented Jul 20, 2014 at 23:03
  • 2
    A little overkill maybe, but this is a beautiful answer, thanks!
    – Martin
    Commented Nov 6, 2014 at 9:02
  • 2
    I agree that all positioning problems should be solved without JS. Commented Mar 18, 2015 at 10:11
  • 2
    It is overkill to use JS AND jQuery
    – ViliusL
    Commented Oct 26, 2017 at 10:15
3

This is a code sample for grid system with equal height.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Above is the CSS for outer div

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Above is the inner div

Hope this help you

2

This helped me.

#outer {
    position:relative;
}
#inner {
    position:absolute;
    top:0;
    left:0px;
    right:0px;
    height:100%;
}

Change right: and left: to set preferable #inner width.

1

A similar case when you need several child elements have the same height can be solved with flexbox:

https://css-tricks.com/using-flexbox/

Set display: flex; for parent and flex: 1; for child elements, they all will have the same height.

0

Simple solution for the new green browsers. Answer is -webkit-fill-available


#inner {
        min-height: -moz-available;
        min-height: -webkit-fill-available;
        min-height: fill-available;
    }
-1

try

#outer{overflow: auto;}

show more options in: How do you keep parents of floated elements from collapsing?

2
  • the "overflow:hidden" option seems to work better because there's no chance of rolling... Commented Jan 16, 2017 at 17:49
  • If you came up with a better solution, you can edit your answer. Also, it would be good if you added more information to your answer, like for example the information provided in the link. Commented Jan 16, 2017 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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