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

从 divs 中删除 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/

背景颜色在视口，CSS之后切断了

2 个答案: