页面内内容的溢出自动答案

【问题标题】：Overflow auto for content inside of a page页面内内容的溢出自动
【发布时间】：2021-09-10 18:07:06
【问题描述】：

正如您在图片中看到的那样，我不希望我的页面可滚动。根据我的研究，我发现我应该将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 这样的即时值）：

示例 sn-p 不能按我的预期工作：

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 这样的值确实以某种方式实现了我想要的。只是我希望它尽可能大。

【问题讨论】：

请提供工作样本

标签： html css bootstrap-5 mdbootstrap

【解决方案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>

【讨论】：

在你的例子中你说max-height:calc(100% - 76px) /* 76 is header plus footer total*/;这个数字是从哪里来的？你可以动态计算吗？