Home/ Questions/Q 8702105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:34:05+00:00

I want a page that has two fixed-width columns on the left and a

  • 0

I want a page that has two fixed-width columns on the left and a main column that fills up the rest of the width of <body>. Within each column, I want to place some <div> object on the top and a <ul> object that fills up the rest of the height. I tried the following, but could not make the height of the <ul> objects automatically adjust to fill in the height. Rather, it overflows to the bottom as much as the height of the <div> above them.

<html>
<style>
body{
    margin:0;padding:0;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:red;
}
.column{
    float: left;
    background-color:blue;
}
.column>ul{
    height: 100%;
    width: 100;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:green;
}
#main-column>ul{
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color:brown;
}
</style>
<body>
<div class="column">
  <div>Column 1 Title</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>
<div class="column">
  <div>Column 2 Title</div>
  <ul>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>
<div id="main-column">
  <div>Main Column Title</div>
  <ul>
    <li>Item 5</li>
    <li>Item 6</li>
  </ul>
</div>
</body></html>

How can I make it so that height of the <ul> objects are automatically adjusted to fill up the remaining height?
​
This is what I get so far. The scroll bar is cut off and extends below the window border, which indicates that its height is overflowing.

screen shot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you give the column titles a fixed height, you can use that along with position: absolute on the uls to get the layout you want. Demo: http://jsbin.com/ecilob/1/edit

    HTML:

    <body>
    <div class="column fw">
        <div class="title">Column 1 Title</div>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </div>
    <div class="column fw">
        <div class="title">Column 2 Title</div>
        <ul>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </div>
    <div class="column main">
        <div class="title">Main Column Title</div>
        <ul>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>
    </div>
</body>

    CSS:

    body {
 margin: 0;
  padding: 0;
}

.column .title { 
  height: 30px;
  border-bottom: 1px dashed #333;
}

.column {
  background: lightblue;
  float: left;
  position: absolute;
  top: 0;
  bottom: 0;
}
.column + .column {
  background: coral;
  left: 120px;
}
.column + .column + .column { background: goldenrod; }

.column.fw {
  width: 120px;
}
.column.main {
  left: 240px;
  right: 0;
}

.column ul {
 position: absolute;
  margin: 0;
  top: 30px;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: scroll;
}
    • 0