ビューポート、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