视口后背景颜色被切断，CSS

Question

当我拉伸浏览器窗口以便不出现滚动条时，我的内容很好。但是，如果我将浏览器缩小到出现滚动条的小高度，则我的背景颜色会在视口之外被切断。这是代码，底部的 jsfiddle：

<div id="container">

<header>
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</header>

<div role="main">

<div id="content-listing">
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div><!--end content-listing-->

<div id="content-display">
<article>
<section class="prop-desc">
<p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>ZLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</article>
</div><!--end content-display-->

</div><!--end main-->

</div><!--end container-->

和 CSS：

/* ///// Globals ///// */
body{background-color:green;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
body,html{height:100%;}
::-webkit-scrollbar-thumb:vertical{height:10px;background:#fff;}
::-webkit-scrollbar {width:10px;height:5px;background:yellow;margin-right:5px;}
img{max-width:100%;}

/* ///// Layout ///// */
#container{width:90%;height:100%;}/*960px*/

header{width:17.708333333333%;float:left;background-color:blue;height:100%;}/*170px*/

div[role=main]{width:82.291666666667%;float:left;height:100%;}/*790px*/

#content-listing{width:29.113924050633%;float:left;background-color:red;height:100%;}/*230px*/

#content-display{width:70.886075949367%;float:left;background-color:orange;height:100%;color:#fff;}/*560px*/

为了演示我的意思，请单击下面的小提琴并调整窗口大小，这样就没有滚动条，然后再次出现垂直滚动条：

http://jsfiddle.net/g2748/3/

Answer 1

尝试从您的 div 中删除 height: 100%;。它应该有效。

Answer 2

因此，我解决这个问题的方法是将 padding-bottom:20010px;margin-bottom: -20000px; 添加到 3 列。我从这里改编了这种技术：

http://www.alistapart.com/articles/holygrail

我然后将 min-height:100% 和 overflow:hidden 添加到 #container div。它有点棘手，它做到了这一点：

http://jsfiddle.net/g2748/6/