页面内内容自动溢出

Question

正如您在图片中看到的，我不希望我的页面可以滚动。根据我的研究，我发现我应该将 height 设置为 100vh (How to make a div 100% height of the browser window)。现在，我将元素 4 和 5 等所有大内容设置为 overflow:auto。但由于某种原因没有滚动条，内容比屏幕高度大。

我一直在研究并找到了这个答案：Make a div fill the height of the remaining screen space

按照回答还是没有解决我的问题。我在我的项目中使用了 mdbootstrap，所以它可能会导致问题。

我的问题是如何实现这一点（不使用像 100px 这样的立即值）：

示例代码段不符合我的预期：

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.row {
  border: 1px dotted grey;
}

.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
  background-color:grey;
}

.content {
  flex: 1 1 auto;
  background-color:#C4C4C4;
}

.scrollableContent {
  flex: 1 1 auto;
  background-color:#7D7D7D;
  overflow: auto;
  margin:5px;
}

.item {
  background-color:black;
  color:white;
  margin:5px;
}

.footer {
  flex: 0 1 40px;
  background-color:grey;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <b>Navigation Bar</b>
  </div>
  <div class="row content">
    <div class="item">
      Some Content
    </div>
    <div class="item">
      Some Content
    </div>
    <div class="item">
      Some Content
    </div>
    <div class="row scrollableContent">
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
    </div>
    
  </div>
  <div class="row footer">
    <b>Footer</b>
  </div>
</div>

Long Content 应该是可滚动的，页眉和页脚应该是固定的。

编辑： 我注意到将 .scrollableContent 的高度设置为 200px 之类的值确实以某种方式实现了我想要的。只是我希望它尽可能大。

Answer 1

据我了解是这样的：

* {
    margin:0;
}
html {
    height:100%;
}
body {
    height:100%;
    display:flex;
    flex-direction:column;
}
.header {
    background:tomato;
    color:#fff;
    padding:10px;
}
.content {
    padding:10px;
    flex:1;
    max-height:calc(100% - 76px) /* 76 is header plus footer total*/;
    overflow-y:scroll;
}
.footer {
    background:dodgerblue;
    color:#fff;
    padding:10px;
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    
    <link rel="stylesheet" href="style.css" />
</head>
<style type="text/css">

</style>
<body>
    <header class="header">Header</header>
    <main class="content">Content
      <div class="scrollableContent">
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
      Long Content<br>
    </div>
    </main>
    <footer class="footer">Footer</footer>
</body>
</html>

页面内内容自动溢出

Overflow auto for content inside of a page

html

css

bootstrap-5

mdbootstrap