How to make a floated div 100% height of its parent?

Question

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?

Sufficiency

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? – Heptarchy

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? – Heptarchy

@Heptarchy depends on widths. if #outer is wider than #inner, text will flow around (and possibly below), but if they are same width, text will end up below #outer. – Horsepowerhour

@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. – Sufficiency

I have it working with tables now :) – Sufficiency

Also see stackoverflow.com/questions/1122381 – Horsepowerhour

Also #15817519 – Angadreme

ignore first 2 answers from this question – Aeneous

Why is percentage height not working on my div? – Pyaemia

Seeing and trying the answers to this question was just depressing. – Praetor

Answer 1

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.

Horsepowerhour

Hmm.. the question was about Floated div's. You answered about absolutely position divs – Otten

I never stop surprising how complex it is to achieve insanely simple things in HTML/CSS :) – Wintertide

Any way to do this without hardcoding widths? Not great for responsive containers. – Kimon

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. – Whiteheaded

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. – Shred

@Yura In CSS, "height:100%" actually means set the height to 100% of container if this condition and that condition (etc.) are fulfilled. To get a full answer, spend a day or so reading the relevant specs. Or try your luck on SO! – Shred

This answer is so esoteric, and look at the other answers! "treat it like a table cell" or "use flex". These are quality answers, and they amount to using tools that were designed for the task OP wants to accomplish. Absolute positioning is error prone and waay overkill. – Zavala

Today makes sense using flex, but if you don't understand this properties, you will have a hard time using flexbox. This answer made me understand position property influence on other properties and this is the foundation on which flexbox is built. For sure now we will use 100% of the time flexbox. – Quantize

Answer 2

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/

Deserve

You should point out that this works only in modern browsers, and even then requires vendor prefixes. – Unnerve

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. – Pathological

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. ;) – Egocentrism

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. – Carrillo

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. – Dede

According to caniuse.com, IE10 and IE11 have buggy enough implementations of flexbox that it's only considered "Partial Support." I'd be hesitant to use flexbox on a production site supporting those browsers: caniuse.com/#search=flexbox – Shinleaf

display: inline-flexcan be useful too. – Expecting

Answer 3

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>

Monique

Cool, this is less limiting than Chadwick's requirement of position:absolute (which could interfere with a site's styles) – Syncope

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. – Michealmicheil

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 – Unnerve

Thank you very much. I've posted my specific solution as an answer to another question on SO: https://mcmap.net/q/110547/-css-how-do-i-make-the-height-of-two-right-divs-equal-the-height-of-the-left-divs. – Isreal

Answer 4

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.

Sufficiency

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)? – Tuque

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...? – Arris

Answer 5

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.

Disable

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 – Angarsk

Answer 6

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

Twilley

Answer 7

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.

Bimanous

It seems overkill to throw javascript at this layout problem. – Unnerve

As someone who is having to develop in IE: THANK YOU! – Hoenack

A little overkill maybe, but this is a beautiful answer, thanks! – Shrink

I agree that all positioning problems should be solved without JS. – Lecky

It is overkill to use JS AND jQuery – Pimple

And at this state it is not responsive. If parent element resize the child stays the same. – Trinh

Answer 8

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

Disenfranchise

Answer 9

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.

Cholecystectomy

Answer 10

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.

Featheredge

Answer 11

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

Renvoi

Answer 12

try

#outer{overflow: auto;}

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

Gujranwala

the "overflow:hidden" option seems to work better because there's no chance of rolling... – Gujranwala

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. – Tristichous