内容从主容器溢出

Question

内容从主容器溢出

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

我有一个顶部边距为 50px 的容器div。容器内有一个侧菜单div，设置为 100%。窗口的高度为 650px，但是当内容大于 650px 时，侧菜单和容器div 都无法适应此窗口

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

编辑：我发现主体高度是窗口的大小，这限制了容器div。仍然不确定如何确保主体高度增长到内容的完整尺寸。

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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

只需在 #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;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

更新：

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

但是，如果由于内容较多而高度超过容器，则允许其超出而不会出现任何问题，因为我们刚刚限制了它的最小值而不是最大值。

归档时间：	6 年，5 月前
查看次数：	1648 次
最近记录：	5 年，9 月前