如何使一个div显示滚动条（不使用固定高度）？

Question

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

它们都具有宽度为100%。

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

下面的那个 div 应该填充剩余的屏幕。但是，如果其内容不适合 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 实现呢？

更新：

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

这可行吗？

- Eagle

---

你可以在头部div上不设置高度来实现，但是如果头部内容过多，底部内容div可能会超出视窗底部。 - Zoidberg

Answer 1

这应该可以解决你的问题。

#header{ overflow: hidden }

#content{ overflow-y: auto }

编辑：您还需要定义 div 的高度。

- TeKapa

---

但是如果div要填满整个屏幕呢？第一个应该是其内容的高度，第二个应该填充剩余的屏幕吗？ - Eagle

Answer 2

为了使用CSS完成此操作，您需要在底部div上定义高度，然后添加overflow:auto。

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

不幸的是，这意味着您的顶部div也需要定义高度，因为内容必须在页面上占用预定义的空间。如果您使用百分比来设置高度，则需要为标题div定义一个高度，以防拉伸和缩小浏览器窗口时出现问题。

- Zoidberg

---

overflow:auto会同时激活水平和垂直滚动条，他只想要垂直滚动条。 - TeKapa

是的，我知道，在我的经验中，水平滚动条比div横向拉伸并将垂直滚动条推出视图屏幕更好。 - Zoidberg

然后您使用 overflow-x hidden。 - TeKapa

Answer 3

我认为唯一能实现你的需求的方式是使用JavaScript。虽然我知道您没有标记/要求JS，但我想不到一个简单、优雅的CSS解决方案。

通过JS，您可以捕获标题div的onpropertychange事件，检查属性是否更改为offsetHeight/clientHeight，并调整内容div的top样式属性。内容div也需要具有position:absolute;和bottom:0px;。

如果您对JS解决方案不感兴趣，我很抱歉，但我认为除非接受低于您所期望的用户体验，否则没有CSS解决方案。

- Andy E

---

是的，我知道如何使用JS完成这个任务，但我想知道是否有一种使用CSS的方法。 - Eagle

你正在尝试定义两个div的总最大高度，其中一个是可变高度，另一个占据剩余的视口。实际上，考虑到CSS的当前状态，我只能看到这可能需要使用脚本来实现。 - Andy E

Answer 4

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

- Eimantas

---

还需要指定一个高度，否则你将不会得到滚动条，div 将会在高度上扩展。 - Zoidberg