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

Question

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

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

其他DIV应该固定，并且始终为屏幕（窗口）高度的20％。

固定DIV非常容易通过position:fixed实现，但mainContent DIV被底部DIV覆盖。 为此，我在主体上添加了padding-bottom 。

我想要实现的是，上（mainContent）div的min-height / height应该一直到底部DIV的顶部。

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

Answer 1

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

body {padding-bottom: 20vh;}

.fixed {height: 20vh}

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

Answer 2

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

即使是对于“ padding-top”和“ padding-bottom” ，百分比也是相对于所生成的盒子的包含块的宽度来计算的。 如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。

因此，您填充的20％ 身体元素取决于身体宽度。

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

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

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