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

以下是使用fixed positioning的示例：

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;
}

使用relative positioning的人：

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

如果你从here借用了粘性页脚的想法，并调整它以获得固定标题，那么它看起来就像this (fiddle)。

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/

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

请注意，此版本会在视口底部丢失20px，因此根据您的使用方式，它可能适用于您，也可能不适用。

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

3 个答案: