css - css中固定高度元素下的流体Div？

Question

我想知道当固定宽度占用一定数量的窗口时，是否有一种方法可以让一个元素利用它所拥有的剩余窗口空间来伸展自己。

例如

    <div id ="first">
   This div will ALWAYS be fixed at 20px height
   </div>
   <div id="second">
      This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window. 
     </div>

谢谢你

Answer 1

这是使用固定定位的示例：

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#first {
    height:20px;
    background:yellow;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1;
}
#second {
    padding-top:20px;
    height:100%;
    background:pink;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}

还有一个使用相对定位：

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#first {
    height:20px;
    background:yellow;
    position:relative;
    z-index:1;
}
#second {
    margin-top:-20px;
    padding-top:20px;
    height:100%;
    background:pink;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    overflow:auto;
}

两者都假设以下 HTML：

<div id ="first">
   This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
   This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>

Answer 2

如果你从这里借用粘性页脚的想法，并调整它以获得一个固定的页眉，它看起来像这样（小提琴）。

的HTML：

    <div id ="first">
   This div will ALWAYS be fixed at 20px height

</div>
   <div id="second">
       <div id="push"></div>
      This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window. 
     </div>​

的CSS：

   #first {
  height: 20px; 

}
#push {
  height: 20px; 
  background: #fcc;  
}
html, body {
    height: 100%;
}
#second {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: -20px 0;
    background: #cfc;
}

Answer 3

这是你想要的吗？

http://jsfiddle.net/xvnCd/

在您的第一句话中，您说“固定宽度”，但在代码中您说的是高度，所以我不确定这是否是您要找的。

请注意，此版本将在视口底部丢失 20 像素，因此它可能适合您，也可能不适合您，具体取决于您需要如何使用它。