javascript - 拉伸(stretch)一个 div 以填充空白

Question

我有 3 个 div 水平对齐。

• Div 1 是我的侧边栏

  display:block;
  float:left;
  width:180px;
  height:100%;
  

• Div 2 是中间(子内容)

  display:block;
  float:left;
  width:200px;
  height 100%;
  

• Div 3 是正确的部分

width:100% 在 Div 3 上将它放在 Div 1 和 2 的下方。我怎样才能让它在页面右侧向上拉伸(stretch)？

Answer 1

如果您不想使用 calc() 函数，请尝试以下操作:

<div class="wrapper">
    <div class="sidebar">sidebar</div>
    <div class="panel">panel</div>
    <div class="main">main</div>
</div>

.wrapper {
    border: 1px dotted blue;
    height: 400px;
}
.sidebar {
    width: 100px;
    height: 100%;
    background-color: tan;
    float: left;
}
.panel {
    width: 200px;
    height: 100%;
    background-color: pink;    
    float: left;
}
.main {
    width: auto;
    height: 100%;
    border: 1px solid red;
    overflow: auto;
}

查看演示:http://jsfiddle.net/audetwebdesign/6qdYK/

.main 上的 overflow: auto 会将 div 保持为一列，而不环绕 float 元素，这可能是您需要的。