Home/ Questions/Q 7037057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:29:53+00:00

Sorry to have to ask this since there are many CSS 100% height questions

  • 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0