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：

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

固定配置を使用した例を次に示します。

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 3

これは、あなたの望むことですか？

http://jsfiddle.net/xvnCd/

最初の文では「固定幅」と言っていますが、コードでは高さと言っているので、これがあなたが探しているものかどうかわかりません。

このバージョンでは、ビューポートの下部で 20 ピクセルが失われることに注意してください。そのため、これをどのように使用する必要があるかによって、機能する場合と機能しない場合があります。