0

Sorry to have to ask this since there are many CSS 100% height questions here (which I've read).

I'm to achieve a simple layout using DIVs instead of a TABLE. The first 3 rows are fixed height, the 4th row should expand and the fifth row should be a fixed size (at the bottom).

This is strait forward with a table, how can I do this with DIVs?

Here's the TABLE version:

<html>
<head>

</head>
<body>

<table width="100%" height="100%" border="1">
    <tr height="20px">
         <td>
             fixed height 20
         </td>
    </tr>
    <tr height="50px">
         <td>
             fixed height 50
         </td>
    </tr>
    <tr height="100px">
         <td>
             fixed height 100
         </td>
    </tr>
    <tr>
        <td>
            auto expanding height
        </td>
    </tr>
    <tr height="50px">
        <td>
            fixed height 50
        </td>
    </tr>
</table>
</body>
</html>

Here's my best attempt so far which doesn't work.

<html>
<head>
</head>
<body>

<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;">

    <div style="height: 20px; border-width: 2px; border-style: solid">
        fixed height 20
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>

    <div style="height: 100px; border-width: 2px; border-style: solid">
        fixed height 100
    </div>

    <div style="border-width: 2px; border-style: solid;">
        Auto expanding?
    </div>

    <div style="height: 50px; border-width: 2px; border-style: solid">
        fixed height 50
    </div>
</div>
</body>
</html>
Improve this question
5
  • Did you try adding a doctype? Example: <!DOCTYPE html> Commented Jan 11, 2012 at 15:07
  • your example seems to work jsfiddle.net/zDLGM Do you mean you want the 3rd row to expand to make the whole thing fill the page? Commented Jan 11, 2012 at 15:07
  • Yes. Just like a table would do it. Commented Jan 11, 2012 at 15:14
  • A table with this setup will autogrow to 100% of the body/window. If the content of the auto-expanding td grows larger than the height it got, it will make the table larger, thereby causing the window to scroll Commented Jan 11, 2012 at 15:43
  • Is the last div supposed to be something like a footer? If that's the case, you can set it to position: fixed and bottom: 0. Then, using the solution I posted, it will keep that bottom div fixed to the bottom of the window and the expanding div will fill the empty space. I'm trying to get a better handle on the intent behind this layout. Here's an example of what I mean: jsfiddle.net/vArfP/1 Commented Jan 11, 2012 at 16:02

3 Answers 3

Reset to default
1

Divs stack up automatically so all you have to do is hand them a height and you should be all set. Try this:

HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

EDIT Updated answer for future reference. Now the container completely fills the width and height of the document and just scrolls the scrollable portion of the page while keeping the sections that OP wanted available.

Full view: http://jsfiddle.net/8abeU/show/ Fiddle: http://jsfiddle.net/8abeU

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

No. It does not expand "auto".
@DanHoward by expand auto, you mean with the content? or to the end of the page?
right. This example does not work. It does not expand like a table would.
@DanHoward I don't understand, you want the container to push all the way down to the bottom of the page? or expand with the content?
The outer container should fill the whole window. The DIV which does not use fixed height should expand to fill the remaining space in the middle. Check the table example. It works perfectly with a table.
|
1

You need to set the parent's position attribute to absolute and set the auto div's height to 100%. You can see it here. Also remember to include a doctype declaration at the top of your HTML, that'll help make it render more consistently across browsers.

Note:

This won't cause the container to fill the entire window vertically but if you don't have to put a border on it, it will look as if it does.

Improve this answer

2 Comments

Thanks you. You're link to jsfiddle jsfiddle.net/vArfP/1 works for me. :)
Awesome I'm glad I could help. It was an interesting problem.
0

The quick answer is replace your table and tr elements with DIVs. Then set the first three rows with a css class="fixed-height-(whatever size)" Let the forth div expand as needed and the last row have a css class="fixed-height-(whatever size). You can use the same class where the heights are the same, assuming all the other styling is the same.

Improve this answer

2 Comments

I added my best attempt so far.
@DanHoward: Make sure they are DIV CLASSES and DIV IDs because the DIVS will be used more than once on a page.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.