0

我想要一个页面，左边有两个固定宽度的列，一个主列填满<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>对象的高度自动调整以填充剩余高度？这是我到目前为止所得到的。滚动条被截断并延伸到窗口边框下方，这表明它的高度溢出了。

截屏

4

1 回答 1

1

如果你给列标题一个固定的高度，你可以使用它和position: absolutesul来获得你想要的布局。演示：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;
}
于 2012-10-17T17:31:44.660 回答