Question

我需要制作一个占据窗口高度100％的div来创建侧边栏。这很简单。但有没有办法将该列拆分为3，具有固定高度的第1和第3部分，中间部分扩展以填充加载时的剩余空间，当浏览器仅使用CSS调整大小时，无需使用javascript？

Answer 1

如果你在侧边栏中粘贴三个div并且侧边栏的CSS位置为'relative'，那么你可以设置三个内部div的CSS，如下所示：

#divTop {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 120px;
}
#divMiddle {
position: absolute;
top: 120px;
bottom: 120px;
left: 0px;
right: 0px;
height: auto;
}
#divBottom {
position: absolute;
bottom: 0px; /* EDIT: corrected from 120px; */
left: 0px;
right: 0px;
height: 120px;
}

Answer 2

我知道你接受了答案。我正在添加这个以供将来参考。您也可以使用css display:table样式执行所需操作。在IE7中不支持，但......也许你不在乎。

使用容器div，然后使用三个子div，如下所示：

<div id='container'>
  <div id='col1'> <h1>content for col1</h1> </div>
  <div id='col2'> <h1>content for col2</h1> </div>
  <div id='col3'> <h1>content for col3</h1> </div>
</div>

css看起来像这样：

#container {
  display:table;
}
#container > div {
  display:table-cell;
  padding:4px 8px;
}
#col1 {
  width:160px;
  background-color:LightGreen;
}
#col2 {
  background-color:LightBlue;
}

#col3 {
  width:240px;
  background-color:LightPink;
}

http://jsfiddle.net/CtEya/embedded/result/

一个100％高度的柱子分成3个部分：2个固定和1个流体

2 个答案: