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

【问题标题】：CSS liquid layout where the footer div follows the size of the page and stays at the bottomCSS 液体布局，其中页脚 div 跟随页面大小并停留在底部
【发布时间】：2012-10-24 22:14:28
【问题描述】：

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

<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 的解决方案。

【问题讨论】：

标签： css layout html liquid-layout

【解决方案1】：

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

毫无疑问，如果没有 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;
}

【讨论】：

感谢浮士德的帮助。如果不重复 JS，我无法获得请求的行为。我实现了一个在调整窗口大小和加载页面时调用的函数。工作正常。谢谢马可

【解决方案2】：

我猜你可以这样做：

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

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

【讨论】：