Question

我遇到的任务看起来很标准：我有一个固定高度的容器，里面有3 div个。我希望第二个div在顶部和底部div之间拉伸。当第二个div的内容溢出时 - 我想显示滚动条。

我知道如何使用absolute定位完成此任务。问题是：我可以使用table上的div吗？

附加要求：如果可能，我想避免将标题的高度设置为固定。

我试图在我的小提琴中对其进行编码，但正如您所见，I failed。

CSS：

.container {
    height: 500px;
    background-color: gainsboro;
}

.table {
    display: table;
    height: 100%;
}

.table > div {
    display: table-row;
}

.table > div > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
    overflow: scroll;
}

.center > div {
    height: 100%;
}

.content {
    height: 700px;
}

HTML：

<div class="container">
    <div class="table">
     <div>
         <div>XXX</div>
     </div>
     <div class="center">
         <div>
             <div class="content"></div>
         </div>
     </div>
     <div>
         <div>YYY</div>
     </div>
    </div>
</div>

Answer 1

你的方式是正确的，只需进行一些更改（见Fiddle）：

html, body, .container, .table {
    margin: 0;
    height: 100%;
}

#header,#footer {
    height: 1px;
}

这应该有效，因为如果内容需要，表格单元格的高度会增加。

只是一个提示：你可以改进整个事情，例如我会使用HTML 5以及<header/>和<footer/>元素。但这不是你问题的一部分。无论如何，这是您fiddle的另一个更新：

 <div>
      <header>
          <div>XXX</div>
      </header>
      <main>
          <div>
              <div class="content"></div>
          </div>
      </main>
      <footer>
          <div>YYY</div>
      </footer>
 </div>

使用CSS：

html, body, body > div {
    margin: 0;
    height: 100%;
}

body {
    background-color: gainsboro;
}

body > div {
    display: table;
    width: 100%;
}

body > div > * {
    display: table-row;
}

body > div > * > div {
    display: table-cell;
    vertical-align: middle;
    border: 1px solid black;
}

header, footer {
    height: 1px;
}

main对HTML 5来说是一个新手，就在您想知道的时候。

Answer 2

以下是一种可能的解决方案：

<div class="container">
    <div class="header">
        <div>Top Header Block</div>
    </div>
    <div class="center">
        <div class="content">
            <p>Lorem ipsum ...</p>
            <p>Lorem ipsum ...</p>
        </div><!-- .content -->
    </div><!-- .center -->
    <div class="footer">
        <div>Bottom Footer Block</div>
    </div>
</div>

和CSS：

.container {
    height: 200px;
}
.header, .footer {
    background-color: gainsboro;
}
.center {
    height: inherit;
}
.content {
    background-color: #F0F0F0;
    height: inherit;
    overflow: auto;
}

由于您正在修复容器的高度，因此您继承了.center和.content <div>中的高度。

如果调整容器高度，则中心div会扩展，但页眉和页脚div保持相同的高度。

在内容div上使用overflow以允许滚动。

小提琴参考：http://jsfiddle.net/audetwebdesign/nae5z/

在页眉和页脚之间拉伸div

2 个答案: