我在最新版本的 Chrome 和 Firefox 中遇到了一个 CSS 问题，我似乎无法隔离，感谢任何帮助。

我有一个 container div，其上边距为 50px。在容器内有一个设置为 100% 的 sidemenu div。窗口的高度为 650px，但是当内容大于 650px 时，sidemenu 和 container div 都不适合这个

奇怪的是，它在您运行代码片段时有效，但在您将 html 保存在代码片段中并在本地运行时却不起作用。我猜 StackOverflow 中有一些 css 可以解决我的问题，但我不确定问题是什么或如何解决。

编辑:我发现 body 高度是窗口的大小，这限制了 container div。仍然不确定如何确保 body 高度增长到内容的完整大小。

html, body {
  margin: 0;
}

#container {
  margin-top: 50px;
  height: 100%;
  background-color: lightgreen;
}

#sidenav {
  width: 250px;
  height: 100%;
  display: grid;
  background-color: green;
  align-content: space-between;
}

#menu {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
}

#footer {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<html>
<body>
<div id="container">
  <div id="sidenav">
    <div id="menu">
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
    </div>
    <div id="footer">
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
    </div>
  </div>
</div>
</body>
</html>

最佳答案

只需要在#container 和#sidenav 选择器中添加 min-height:100% 而不是 height:100%。

请尝试以下 css。

希望对您有所帮助。

html, body {
  margin: 0;
}

#container {
  margin-top: 50px;
  min-height: 100%; /*change*/
  background-color: lightgreen;
}

#sidenav {
  width: 250px;
  min-height: 100%; /*change*/
  display: grid;
  background-color: green;
  align-content: space-between;
}

#menu {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background-color: red;
}

#footer {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

<html>
<head>
</head>
<body>
<div id="container">
  <div id="sidenav">
    <div id="menu">
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
      sidenav<br/><br/><br/><br/><br/>
    </div>
    <div id="footer">
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
      footer<br/>
    </div>
  </div>
</div>
</body>
</html>

更新:

使用 min-height:100% 会给出容器的最小高度，即使内容较少也不会超过。

但是，如果由于内容较多而导致高度超过容器，那么它可以毫无问题地超出，因为我们刚刚限制了它的最小值而不是最大值。

关于html - 内容从主容器溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57703262/

html - 内容从主容器溢出

更新:

上一篇：css - 如何保持与图像的比例？

下一篇：Css 不适用于按钮