css - CSS 液体布局，其中页脚 div 跟随页面大小并停留在底部

Question

我正在研究以下布局结构：

<div id="wrapper">
    <div id="header"></div>
    <div id="pageContainer"></div>
    <div id="footer"></div>
</div>

使用以下 CSS，我将页脚设置为页面底部：

#wrapper {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#pageContainer {
   padding:10px;
   padding-bottom:60px;
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;
   background:#6cf;
}

如果“pageContainer div”中的内容很小，我不想在 div 中显示滚动条，而是将页脚附加到“pageContainer div”的底部（不是页脚总是在底部视口）

如果“pageContainer div”的内容很长，我需要页脚在视口（底部）中保持可见，并在“pageContainer div”中显示滚动条。

我该怎么做呢？有任何想法吗？谢谢！

PS：我需要一个不使用JS的解决方案。

Answer 1

我想你可以做这样的事情：

#header {
   background:#ff0;
   padding:10px;
   height: 15%;
}
#pageContainer {
   padding:10px;
   max-height: 70%;
   overflow: auto;
}
#footer {
   bottom:0;
   width:100%;
   height:15%;
   background:#6cf;
}​

请注意，您需要以百分比指定您的身高。填充也可能是一个问题。

Answer 2

如果我没看错，您描述的是定位从相对切换到固定的行为，具体取决于元素相对于视口中可用房地产的大小。

可以肯定的是，如果没有 JavaScript，您将无法实现这一目标。

但是，页脚始终位于视口底部的解决方案相当常见，并且无需 JavaScript 也很容易实现。如果您还不知道如何操作：

#header, #pageContainer, #footer{
    position:fixed;
    left:0px;
    right:0px;
}
#header{
    top:0px;
    height:100px;
    background:#ff0;
}
#pageContainer {
    top:100px;
    bottom:60px;
    overflow:auto;
}
#footer {
    bottom:0px;
    width:100%;
    height:60px;
    background:#6cf;
}