css - 视口(viewport)、CSS 后背景颜色被切断

Question

当我拉伸(stretch)浏览器窗口使滚动条不出现时，我的内容没有问题。但是，如果我将浏览器缩小到滚动条出现的小高度，我的背景颜色就会被切断超过视口(viewport)。这是代码，底部的 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*/

为了证明我的意思，点击下面的 fiddle 并调整你的窗口大小，这样就没有滚动条了，然后再次调整一个垂直滚动条:

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

Answer 1

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