Question

我想创建三个堆叠的div。顶部和底部将具有固定高度，而中间的那个将具有动态高度，其扩展以填充剩余空间：

enter image description here

我尝试了很多东西，例如将高度设置为auto。我确实有一个解决方案，但它涉及JavaScript（即计算剩余高度），但我想知道是否有纯CSS解决方案。

Answer 1

一种解决方案是使用位置absolute。

这种方法的缺点是，如果周围的总高度小于固定高度的总和，则container将不再可见。

另外需要注意的是，如果您想要定位移动设备，这可能是一个糟糕的解决方案。如果这个解决方案合适，它总是取决于具体情况。

如果我没记错的话，你只会遇到IE 6（在桌面上）不支持top bottom位置absolute组合的问题。

<强> HTML

 <div class="header"></div>
 <div class="container"></div>
 <div class="footer"></div>

<强> CSS

  .header, .container, .footer{
      position: absolute;
      outline: 1px solid black;
  }

  .header {
      left: 0px;
      top: 0px;
      right : 0px;
      height: 50px;
  }


  .container {
      left: 0px;
      top: 50px;
      right : 0px;
      bottom: 50px;
  }


  .footer {
      left: 0px;
      bottom: 0px;
      right : 0px;
      height: 50px;
  }

JSFiddle

Answer 2

有一个CSS解决方案，但它不适用于旧版浏览器。您需要使用CSS新增的calc“函数”，并结合height: 100%。如果您之前从未使用过height: 100%，那么您知道您想要100％高的那个元素的每个父元素也必须设置为height:100%。 calc可以获取百分比值并从中减去像素，因此您只需将其设置为100%减去顶部和底部div的高度。

支持者：IE9 +，Firefox 4 +，Chrome 19 +，Safari 6+ http://caniuse.com/calc

<强> HTML

<div id='top'></div>
<div id='mid'></div>
<div id='bot'></div>

<强> CSS

html, body
{
    height: 100%;
}

#top, #bot
{
    height: 50px;
    background: red;
}

#mid
{
    height: calc(100% - 100px);
}

FIDDLE： http://jsfiddle.net/jakelauer/9cYUB/

Answer 3

如果您需要较旧的浏览器支持，或者需要支持IE8+ or higher you could use the CSS table layout，则可以使用HTML表格执行此操作。

这是使用CSS表格布局的 jsFiddle 。

<强> HTML

<div>
    <div>
        <div>Fixed Height</div>
    </div>
    <div>
        <div>
            <div>Variable Height</div>
        </div>
    </div>
    <div>
        <div>Fixed Height</div>
    </div>
</div>

<强> CSS

html, body {
    height:100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    text-align: center;
    font-size: 20pt;
    font-family: Verdana;
}
body > div {
    display:table;
    width: 100%;
    height:100%;
}
body > div > div {
    display: table-row;
}
body > div > div > div {
    display: table-cell;
    vertical-align: middle;
}
body > div > div:nth-child(odd) {
    background: grey;
    color: #FFF;
    height: 100px;
}
body > div > div:nth-child(even) {
    height:100%;
    width:100%;
}
body > div > div:nth-child(even) >div {
    height:100%;
    width:100%;
    overflow:hidden;
}

Answer 4

如果我理解你的要求，你需要使用wrap div：http://www.cssstickyfooter.com/using-sticky-footer-code.html

创建三个div，使顶部和底部具有固定高度，中间一个具有动态高度？

4 个答案: