Question

我有一个页面上有两个div，它应该填满整个屏幕。

两者都有宽度= 100％

上面的高度应该由其内容（适合所有内容的最小可能高度）定义，并且永远不会显示任何滚动条。

较低的一个应该填满屏幕的其余部分。但是，如果其内容不适合div，则应显示垂直滚动条。

像这样：

<div id="header">This block should not display the scrollbars</div>
<div id="content">This block should fill the rest of the screen and show the vertical scrollbar if the content does not fit</div>

如何使用CSS？

更新

我正在寻找一种不需要我为上部div设置固定高度的解决方案。

这可能吗？

Answer 1

这应该可以解决您的问题

#header{ overflow: hidden }

#content{ overflow-y: auto }

编辑：你必须定义div的高度以及

Answer 2

为了使用CSS，你需要在底部div上定义一个高度，然后添加overflow：auto。

.content {
    height:90%;
    overflow:auto;
}

不幸的是，这意味着您的top div也需要定义一个高度，因为内容必须占用页面上预定义的空间量。如果使用百分比表示高度，则需要为标题div定义高度，以便拉伸和缩小浏览器窗口不会导致问题。

Answer 3

我能看到你实现这一目标的唯一方法是通过Javascript。我知道你没有标记/要求JS，但我想不出一个简单，优雅的CSS解决方案。

使用JS，您可以捕获标头div的onpropertychange事件，检查属性是否更改为offsetHeight / clientHeight并调整内容div的顶部样式属性。内容div还需要position:absolute;和bottom:0px;。

很抱歉，如果您对JS解决方案不感兴趣，我认为如果没有接受用户体验而不考虑您想要实现的目标，我认为没有CSS。

Answer 4

您应该为第二个div定义固定宽度，并使用overflow css属性来定义滚动条。

Answer 5

这是一个完整的CSS解决方案 - http://jsfiddle.net/TUwej/2/

#container { width:500px; border:3px solid red; margin:0 auto; position:relative; }

#sidebar { position:absolute; left:0; top:0; width:150px; height:100%; background-color:yellow; overflow-y:scroll; }

#main { margin-left:150px; }

来源：overflow (scroll) - 100% container height

如何使div显示滚动条（没有固定的高度）？

5 个答案: