Question

我想要一个左侧有两个固定宽度列的页面和一个填充<body>宽度其余部分的主列。在每列中，我想在顶部放置一些<div>对象，并填充其余高度的<ul>对象。我尝试了以下操作，但无法使<ul>个对象的高度自动调整以填充高度。相反，它溢出到底部和它们上面的<div>的高度一样多。

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

如何才能使<ul>个物体的高度自动调整以填满剩余高度？这是我到目前为止所得到的。滚动条被切除并延伸到窗口边框下方，这表示其高度溢出。

screen shot

Answer 1

如果您为列标题指定固定高度，则可以将其与position: absolute上的ul一起使用，以获得所需的布局。演示：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;
}

如何填充对象内的高度

1 个答案: