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

我有一个页面，上面有两个div，它应该填满整个屏幕。如何使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的解决方案。

这可能吗？

来源

2009-11-24 Eagle

你能做到这一点，而不对头部DIV设置高度...但是如果头部中的内容变得太大，则冒着底部内容div运行到视图窗口底部的风险 – Zoidberg 2009-11-24 11:32:10

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

使用JS，你可以捕获header div的onpropertychange事件，检查属性是否改变了offsetHeight/clientHeight并调整内容div的顶部样式属性。内容div也需要有position:absolute;和bottom:0px;。

对不起，如果你对JS解决方案不感兴趣，我只是不认为没有一个CSS接受你想要实现的用户体验。

来源

2009-11-24 12:14:39

是的，我知道如何做到这一点与JS，但我不知道是否有办法做到这一点与CSS – Eagle 2009-11-24 13:20:32

你想要做的是定义2个div的总高度，其中一个是可变高度，其他占用视口的其余部分。真的，我只能看到脚本使用CSS的当前状态。 – 2009-11-25 22:47:43

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

来源

2009-11-24 11:21:22 Eimantas

还需要指定高度，否则您将无法获得滚动条，div将仅展开高度。 – Zoidberg 2009-11-24 11:22:15

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

不幸的是，这意味着您的顶部div也需要定义高度，因为内容必须占用页面上预定义的空间量。如果你使用百分比来表示高度，那么你将需要为你的页眉div定义一个高度，这样拉伸和缩小浏览器窗口不会引起问题。

来源

2009-11-24 11:21:34 Zoidberg

overflow auto会激活两个滚动条，水平和垂直，他只想要垂直滚动条。 – TeKapa 2009-11-24 11:24:01

是的，我知道，在我的经验中，水平滚动条比横向伸展的div更好，并将垂直滚动条从视图屏幕中推出。 – Zoidberg 2009-11-24 11:29:07

然后你使用overflow-x hiden – TeKapa 2009-11-24 11:31:51

这应该解决您的问题

#header{ overflow: hidden } 

#content{ overflow-y: auto }

编辑：你必须定义的div的高度藏汉

来源

2009-11-24 11:22:25 TeKapa

但是divs填满了整个屏幕呢？其中一个应该是其内容的高度，第二个填充屏幕的其余部分？ – Eagle 2009-11-24 12:56:50

-1

这里有一个完整的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

来源

2013-10-18 13:54:57

这与他所要求的无关。 – 2015-01-15 10:11:30

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

回答

相关问题