ansaurus

Question

How to set element (DIV/TABLE/other) height to 100% of its container?

Answer 1

+1 A:

Try:

.outsidecell {
  height:100%;
  <other stuff here>
}

This works, because there is an 'inner' content box which is where the drawing of the content happens. This inner box is only as big as the content it has. So even if that content says 100%, it will only be 100% to itself, and not the parent container. So you need to expand the parent container to its own actual 100% size.

That's probably not the actual mechanics behind it, but in so many words...

Tor Valamo 2009-12-12 00:21:07

Hey, you're right in IE and Firefox, but it doesnt work in Chrome. I also don't quite understand why this has to be; I thought the green colour was proof already that the container was 100% height. Apparently not.If you can figure out how to make it work in Chrome too, you tha man!:)

littlegreen 2009-12-12 01:17:16

I made a new answer about it. Works in Chrome too. :)

Tor Valamo 2009-12-12 12:30:55

Answer 2

A:

If you set a height on your columns and height of the div = 100%, It will work for you..that is if your design allows you to set the height on the TD :).

PortageMonkey 2009-12-12 00:22:02

No, the problem is that they're all variable.. they depend on the content

littlegreen 2009-12-12 01:28:22

Answer 3

+2 A:

First, do not use tables for layout. That's a semantic no-no. With that out of the way, see The Perfect 3 Column Liquid Layout by Matthew James Taylor. Matthew has created a great implementation of multi-column liquid layouts that can be sized in either percentage or em widths.

andymism 2009-12-12 00:26:42

His problem involves two vertically adjacent parts of **variable size and proportion** next to one part which is the same size as the two other combined. A div layout cannot solve the problem. Paste his code into an html file and open it.

Tor Valamo 2009-12-12 00:38:59

I must add, it might be solvable if he's not picky about the two vertical parts being the same height regardless of content.

Tor Valamo 2009-12-12 00:40:47

Thank you for the link, but isn't that code only useful for a three-column layout? I'd be grateful if you could supply me with some working code on how to do it with DIV and CSS only. I tried, and nearly succeeded too, the main problem I had was with the 10px spacing between the cells; the DIV boxes started overlapping and I didn't find a way to keep the spacing constant under liquid conditions.

littlegreen 2009-12-12 01:22:28

@Tor: yes, i am picky about that:)

littlegreen 2009-12-12 01:23:30

Hey guys, try checking out the "Stacked Columns" in the link I posted. I've used example code there for layouts that required columns of equal height but different background colors. Maybe that will work for you too.

andymism 2009-12-12 02:24:25

Hello, tried your link.. it's actually great stuff! Really helps me to get a grip on doing it (properly) with DIV tags. So +1 for that. However, your stacked columns example doesn't include my problem of two left columns covering the height of one right column. I'll have to experiment a bit more to get that working based on the double-column layout.

littlegreen 2009-12-13 22:55:34

Answer 4

+2 A:

Use the outline of the table cell instead of the border, and it will work. And drop the containing div inside it too!

<html>
<head>
    <style>
        table {
            border-spacing:10px;
            border:0px;
        }
        td {
            width:50%;
            outline-style:outset;
            outline-color:yellow;
            background-color:#CCF;
            vertical-align:top;
        }
        * html td { /* IE hack because it doesn't recognise outline */
            border-style:outset;
            border-color:yellow;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            Lorem ipsum dolor sit amet
        </td>
        <td rowspan="2">
            Lorem ipsum dolor sit amet
        </td>
    </tr>
    <tr>
        <td>
            Lorem ipsum dolor sit amet
        </td>
    </tr>
</table>

</body>
</html>

Tor Valamo 2009-12-12 12:28:10

Dude, thanks... +1 for effort :-)But I also cannot use this.. I cannot use the border-spacing property since it has the side-effect of creating a white border around my table that I cannot disable and I don't want (I want to use this layout inside a current webpage and I need it to be 100% width)

littlegreen 2009-12-13 22:36:57

See another solution I posted, which works... in most conditions. DIV-based.

Tor Valamo 2009-12-13 23:27:35

http://stackoverflow.com/questions/1891670/how-to-set-element-div-table-other-height-to-100-of-its-container/1898179#1898179

Tor Valamo 2009-12-13 23:28:12

Answer 5

+1 A:

As horrible as the use of tables may be, after playing with all the proposed solutions I have found only one solution (using tables) that satisfies all my constraints. One day I hope to be able to translate Andy's code to a working solution with DIV's, right now I'm afraid I'm stuck with this. EDIT: For anyone who'd like to try, all source codes are available here.

To recap, my constraints were,

Completely liquid layout: any cell follows the height of any other cell
Spacing between the cells of 10px inside (but not outside)
3D border around the cells
Working for all browsers that I have on my computer (Chrome, IE, Firefox)

Summarizing my solution, I've used empty spacer cells to implement the cell spacing since all other spacing methods known to me didn't satisfy all the constraints:

CSS border-spacing adds a border around the whole table too that I don't want
Selective cell borders limit my ability to add the 3D borders to my cells

Filling the spacer cells with nbsp's made them too high, so I chose to leave them empty and set the CSS empty-cells property to "show". The other option would have been to fill them up with 1x1 spacer GIF's but that is so 1990...

The code:

<html>
<head>
  <style>
 .outsidetable {
  border-collapse: separate;
  border-style: hidden;
  empty-cells: show;
 }

 .spacercell {
  width: 10px;
  height: 10px;
  border-style: none;
 }

 .contentcell {
  border-style: outset;
  border-color: yellow;
  border-width: 2px;
  background-color: #CCF;
 }

  </style>
</head>
<body>

<p>
<table class=outsidetable>
  <tr>
 <td class=contentcell>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
 <td class=spacercell></td>
 <td class=contentcell rowspan=3>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
  </tr>
  <tr>
 <td class=spacercell colspan=3></td>
  </tr>
  <tr>
 <td class=contentcell>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
 <td class=spacercell></td>
  </tr>
</table>
</p>

</body>
</html>

littlegreen 2009-12-13 23:22:27

Answer 6

+1 A:

Here's a div based one, which works as long as the right cell isn't filled with more than the other two combined. This works in IE only if you use an xhtml doctype.

    .inner {
        border:5px outset yellow;
        background-color:#CCF;
    }
    .outer {
        position:relative;
        border:1px solid #000;
        width:500px;
    }
    .left {
        position:relative;
        width:240px;
    }
    .right {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        width:240px;
    }

<div class="outer">
    <div class="inner left">
        Lorem<br />
        Lorem<br />
    </div>
    <div class="inner left">
        Schmorem<br />
        Schmorem<br />
        Schmorem<br />
    </div>
    <div class="inner right">
        Ipsum schmipsum!<br />
        Ipsum schmipsum!<br />
    </div>
</div>

Tor Valamo 2009-12-13 23:22:59

It doesn't address my requirement of 10px spacing between the cells, and as you mention yourself, it's also not completely liquid.I think this code combined with some of the CSS in andymism's "Stacked column layout" will eventually result in a working solution with DIV's, but I don't have the time to work it out now. Sources are available here: http://www.antiflu.dds.nl/layout.zip

littlegreen 2009-12-16 15:05:28

Correction: strict doctype. XHTML doctype is not per definition strict. There are enough XHTML doctypes which triggers quirksmode.

BalusC 2009-12-16 15:19:40

ansaurus

tags:

views:

answers:

How to set element (DIV/TABLE/other) height to 100% of its container?

related questions