CSS: 100% height of inner div

Question

Here is working solution for Chrome and probably Firefox:

http://jsfiddle.net/gHcRX/

Adding height:100% to all tables gives the div required data to calculate the actual height of parent.

But why this doesn't work in Internet Explorer and Opera...

Don't want to use javascript for this.

Is there any simple cross-browser solution?

Why are you using tables for layouts? You really should be using divs. — Yule, Sep 20 '11 at 08:01
I don't know. Had lesser problem with tables, than with divs. Probably working completely with divs is problematic for me. — Somebody, Sep 20 '11 at 08:09
Looks like you're after [equal height columns with CSS](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Eric, Sep 20 '11 at 08:13

Yule · Answer 1 · 2011-09-20T08:15:12.797

0

This may do what you need, using Divs instead of tables:

<div>
    <div style="height:300px; float: left;">
        <div style="height:100%;background:black; float: left;">block1</div>
        <div style="height:100%;background:red; float: left;">block2</div>
    </div>
</div>

Much neater

edited Sep 20 '11 at 08:15

answered Sep 20 '11 at 08:05

Yule

9,668
3
51
72

Almost my exact solution! :P You don't need the 300px height on the inner div though. – Christian Palmstierna Sep 20 '11 at 08:12
So you're trying to style an element based on the height of another (not containing element)? You either need jQuery or the Link that Eric provided. – Yule Sep 20 '11 at 09:53

score 0 · Accepted Answer · answered Sep 20 '11 at 08:11

0

First off, you should NOT be using tables for layout. It's bad practice, and will not work well across different browsers.

If all you want to achieve is getting the divs to expand 100%, you could do something like this:

<div style="height:300px">
    <div style="float:left;height:100%;background:green;">block1</div>
    <div style="float:left;height:100%;background:red;">block2</div>
</div>

http://jsfiddle.net/gHcRX/20/

answered Sep 20 '11 at 08:11

Christian Palmstierna

1,122
5
12

And by the way. In my example i don't have fixed height of my parent element. – Somebody Sep 20 '11 at 08:33
I was unsure of exactly what you are trying to do, so I assumed that you simply wanted your divs to auto-expand to a fixed height. – Christian Palmstierna Sep 20 '11 at 08:43

CSS: 100% height of inner div

2 Answers2