css - 可滚动的 div 填充可用高度

标签 css height overflow scrollable

我目前正在尝试创建一个“ Split View”站点,该站点在左侧有一个可滚动的导航栏,在右侧有一个内容区域。

左侧的导航区域包含一个搜索字段(带有一个提交按钮),下方是一个类似于 Windows 资源管理器的可滚动 TreeView 。

我环顾四周,找到了可滚动 div 和填充窗口其余高度的 div 的解决方案,但结合这些让我有些头疼

我正在寻找一个没有绝对定位的解决方案,因为创建的页面将嵌入到其他地方,这会破坏事情。

这是我到目前为止尝试过的演示:http://codepen.io/anon/pen/Aesgk/

如您所见,由于导航区域的高度,我在右侧获得了第三个滚动条,而不是预期的 2 个滚动条。

提前致谢!

最佳答案

试试这个 CSS

height: 100%
overflow: scroll

关于css - 可滚动的 div 填充可用高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22910541/

相关文章:

JQuery .show().hide() 不让 CSS 悬停代码正常工作

css - 如何使用 CSS 删除此 <hr>

html - 边框 CSS - 意外行为

css - 文本区域高度 Chrome 问题

height - 如何在iTextSharp中设置PdfPTable的高度

css - 具有多个路径的 SVG 剪辑路径的悬停事件

jquery - 是否可以将 div 的高度设置为距固定位置页脚底部的设定距离?

javascript - CSS 溢出 : scroll HTML 的滚动问题

html - Div 滚动能力丢失取决于视口(viewport)大小

html - 滚动内容中的特定固定 div