Question

我有一个文档结构，它将页眉保留在页面顶部，页脚保持在底部。只要中间的内容小于窗口的高度，它就能正常工作。如果内容太长，页脚会在页面下方进一步向下推，并显示一个完整的滚动条。如何才能将滚动条限制为内容DIV。

请注意页眉和页脚的内容不固定，因此我不知道这些元素的高度，也无法将内容元素的顶部位置设置为固定值。我在示例中添加了一个显示/隐藏功能来演示这一点。

我正在尝试在纯CSS中解决这个问题（避免使用Javascript）。我知道使用javascript，我可以监视窗口大小和元素可见性的变化，我可以计算页眉和页脚的高度，并为内容元素设置固定的尺寸。但是有没有非JavaScript的解决方案？

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
}
#main {
    display:table;
    height:100%;
    width:100%;
}
#header, #footer {
    display:table-row;
    background:#88f;
}
#more {
    display: none;
}
#content {
    display:table-row;
    height:100%;
    background:#8f8;
}

它适用于所有现代浏览器，台式机，平板电脑和手机。对于旧浏览器，全身滚动条就可以了。

Answer 1

如果你添加两个包裹块：

<div id="content">
  <div id="content-scroll-wrap">
    <div id="content-scroll">
      content...

然后使用CSS：

#content-scroll-wrap {
    position: relative;
    height: 100%;
}
#content-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
}

http://jsfiddle.net/sA5fD/8/

不了解旧浏览器中的支持。 IE可能需要一些修复。

Answer 2

对于未来的访客：

HTML

<div class="parent"> 

  <div class="child">
    <div class="large-element> </div>
  </div>

</div>

CSS

 .parent {
   height: 1000px
   overflow-y: scroll; 
 }

 .child {
   background-color: royalblue;
   height: auto;
 }

 .large-element {
   height: 1200px; 
 }

在这种情况下，子元素将创建溢出。由于孩子的身高设置为自动，因此它会伸展以填充容器。如果您将其设置为100%，那么它只会1000px，在下方留下一些空白区域！

这是一支笔：https://codepen.io/meteora/pen/JJYoZM

这适用于所有浏览器:)

使div填充剩余的动态高度并滚动而不使用javascript

2 个答案: