Question

我正在使用具有固定标头的引导程序模板，使用padding-top设置内容以便不被该标头隐藏，请参阅this plnkr以获取主意。< / p>

正文已将overflow设置为hidden，以便UI的所有其他部分（侧边栏，上下文菜单等）仅限于当前浏览器视口。

如果我为内容启用overflow-y，则会出现问题，我尝试将height设置为100vh，虽然这会使滚动条恢复，但内容会在底部被截断，这完全合理，但我不知道该怎么做。

有直接的解决方案吗？

Answer 1

html,
body {
    height: 100%; // <---
}
section {
    color: white;
    padding-top: 50px;
    height: 100%;  // <---
    font-family: "Segoe UI";
    font-size: 14pt;
    box-sizing: border-box;  // <---
}
section div {
    overflow-y: auto;
    height: 100%; // <---
    padding: 10px;
    box-sizing: border-box;  // <---
}

Plunker

我们的想法是制作html，body，section和section div height: 100%，以便将它们拉伸到与视口一样高的位置。

box-sizing: border-box应添加到section和section div，以便在其高度中包含填充。

在overflow-y: auto;上section div，内容在section div内滚动。

Answer 2

将margin应用于包含div的CSS。

有些事情如下：

section {
    overflow-y: auto;
    margin-bottom: 20px; // adjust accordingly
}

Answer 3

尝试将高度设置为92vh or 93vh左右，看看是否有效

section div {
  overflow-y: auto;
  height: 93vh;
  padding: 10px;
}

使用填充顶部时，滚动区域会被切断

3 个答案: