在視口，CSS後切斷背景顏色

當我伸展我的瀏覽器窗口，所以沒有滾動條出現時，我的內容是好的。但是，如果我將瀏覽器縮小到出現滾動條的較小高度，則我的背景顏色會從視口中截斷。下面是代碼，的jsfiddle在底部：在視口，CSS後切斷背景顏色

<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/

來源

2012-02-02 Yahreen