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'的底部(不是页脚总是在视口(viewport)底部)

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

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

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

Answer 1

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

毫无疑问，如果没有 JavaScript，您将无法实现这一目标。

但是，页脚始终位于视口(viewport)底部的解决方案相当普遍，并且无需 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;
}