CSS/HTML - 使固定 div 占据屏幕的 20%，另一个可滚动答案

【问题标题】：CSS/HTML - Make fixed div take 20% of screen and the other be scrollableCSS/HTML - 使固定 div 占据屏幕的 20%，另一个可滚动
【发布时间】：2014-11-07 11:34:05
【问题描述】：

我正在尝试构建一个在屏幕底部有一个固定 DIV 的布局，另一个 DIV 及其内容应该是可滚动的。

我希望第一个 DIV 是动态的，这意味着显示在里面的子项可以增加高度，并且它们应该在屏幕高度的 80% 处可见。

另一个 DIV 应该是固定的，并且始终是屏幕（窗口）高度的 20%。

使用position:fixed 实现固定的 DIV 非常简单，但 mainContent DIV 与底部 DIV 重叠。为此，我在正文中添加了padding-bottom。

我想要实现的是上部 (mainContent) div 的最小高度/高度应始终位于底部 DIV 的顶部。

我在这里添加了我的代码http://jsfiddle.net/hp2b64ot/3/。

【问题讨论】：

ryanfait.com/html5-sticky-footer 你需要实现这个
将 padding-bottom: 20% 添加到您正在滚动的 div 中，并确保将正文设置为 margin: 0; padding: 0;。确保html, body 有一个height:100%;

标签： javascript html css

【解决方案1】：

根据您的支持，您可以使用 vh 单位，这意味着：

body {padding-bottom: 20vh;}

.fixed {height: 20vh}

http://jsfiddle.net/hp2b64ot/12/

【讨论】：

感谢您的回答，尽管 Seldon 的评论 100% 解决了问题，但它非常有帮助。

【解决方案2】：

这是解释http://www.w3.org/TR/CSS2/box.html#padding-properties

百分比是相对于生成框的包含块的宽度计算的，即使对于 'padding-top' 和 '填充底部'。如果包含块的宽度取决于此元素，则结果布局在 CSS 2.1 中未定义。

所以 body 元素的 20% 内边距取决于正文宽度。

使用辅助元素来解决这个问题，例如

<div class="col-md-12 bannerEdge-fix"></div>

http://jsfiddle.net/hp2b64ot/13/

【讨论】：