CSS 有一个可滚动的 div，占用 100% 可用高度，但不向正文添加滚动条

Question

我正在尝试让布局在没有任何 JS 的情况下工作，只需 HTML 和 CSS。

top-div
left-div      center-div      right-div

想法是在中心设置垂直滚动条 div，但在页面其他任何地方，包括正文。

最好的想法似乎是一个垂直的 flexbox，用于制作顶行和底行，然后是一个水平的 flexbox，用于制作左、中和右。

这有多难？

好吧，如果你看这个 fiddle，我显然很难理解：

https://jsfiddle.net/gL4pwkxu/1/

文档总是想要超过 window 的高度。为什么？

Answer 1

我认为问题在于您忽略了 <header>top</header> 元素我还将高度单位更改为视口高度而不是 %。看看：https://jsfiddle.net/zL6y7x2j/

希望对您有所帮助

Answer 2

要隐藏 window 滚动添加：

body {
overflow: hidden;
}

然后，使 div 可滚动：

#main-column {
  overflow-y: scroll;
  position: static;
}

Answer 3

很难开始工作。从这个 SO post: Scrolling a flexbox with overflowing content, 需要添加一个元素来根据内容创建自己的高度。但是我必须将 full-page 高度设置为 100vh （视图高度单位）并将 content 的高度设置为任何值然后它起作用了。见下文...

CSS

html, body {
  margin: 0px;
  padding: 0px;
}

full-page {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

header {
  background-color: green;
}

content {
  flex: 1;
  display: flex;
  position: relative;
  height: 1px; // hackery
}

nav {
  background-color: red;
}

#right-column {
  background-color: blue;
}

#main-column {
  flex: 1;
  overflow-y: auto; // used 'auto' so it only appears if you need it
}

#main-column > div {
  min-height: min-content; // magic
}

HTML

<html>
  <body>
  <full-page>  
    <header>top</header>
    <content>
      <nav>left</nav>
      <div id="main-column">
        <div>
          center<br>
          b<br>
          v<br>
          d<br>
          e<br>
          e<br>
          f<br>
          f<br>
          d<br>
          e<br>
          e<br>
          f<br>
          d<br>
          e<br>
          e<br>
          f<br>
          f<br>
          f<br>
        </div>
      </div>
      <div id="right-column">right</div>
    </content>
  </full-page>
  </body>
</html>

CSS 有一个可滚动的 div，占用 100% 可用高度，但不向正文添加滚动条

CSS for having a scrollable div, take up 100% available height, but not add scroll bar to body

css

height

flexbox