如何在全屏 Web 应用程序的内容区域添加滚动条,即使用 CSS 的 100% 屏幕高度
How to add scrollbars in a content area of a full screen web app i.e. 100% height of screen using CSS
我有一个全屏网络应用程序。我在 HTML
、body
和父元素上使用 CSS 100% 高度。我有一个内容 table,它会随着项目的添加而增长。我试图在没有足够的情况下自动显示垂直滚动条 space.
我尝试在 tbody
、table
和周围的 div
(也是 100% 高度)上使用 overflow-y:auto;
overflow:auto;
的不同组合) 但似乎没有任何效果。 100% 的高度有可能吗? overflow 需要固定高度吗?
编辑
这是一些代码。左侧列包含 table,当没有足够的 space.
时,我想向其添加垂直滚动条
不幸的是,您在 faux-table 中使用了 table,这使得执行此操作变得更加困难 对。
您正在将 fieldset > div
设置为其继承的高度,即内部 table 的高度。
如果您改为以视口高度为基准,您可以获得想要的结果,特别是使用 calc
。当前您有 45px 的 "extra stuff"(填充、headers 等)要从计算中删除,因此您可以添加此声明:
.page-contents .left-col fieldset > div {
max-height: calc( 100vh - 45px );
overflow-x: auto;
}
这里是 fiddle:https://jsfiddle.net/468cpvmv/9/
这些是您要在计算中减去的高度:
我有一个全屏网络应用程序。我在 HTML
、body
和父元素上使用 CSS 100% 高度。我有一个内容 table,它会随着项目的添加而增长。我试图在没有足够的情况下自动显示垂直滚动条 space.
我尝试在 tbody
、table
和周围的 div
(也是 100% 高度)上使用 overflow-y:auto;
overflow:auto;
的不同组合) 但似乎没有任何效果。 100% 的高度有可能吗? overflow 需要固定高度吗?
编辑
这是一些代码。左侧列包含 table,当没有足够的 space.
时,我想向其添加垂直滚动条不幸的是,您在 faux-table 中使用了 table,这使得执行此操作变得更加困难 对。
您正在将 fieldset > div
设置为其继承的高度,即内部 table 的高度。
如果您改为以视口高度为基准,您可以获得想要的结果,特别是使用 calc
。当前您有 45px 的 "extra stuff"(填充、headers 等)要从计算中删除,因此您可以添加此声明:
.page-contents .left-col fieldset > div {
max-height: calc( 100vh - 45px );
overflow-x: auto;
}
这里是 fiddle:https://jsfiddle.net/468cpvmv/9/
这些是您要在计算中减去的高度: