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;
}