【问题标题】：Content is overflowing from the main container内容从主容器溢出
【发布时间】：2019-08-29 05:01:58
【问题描述】：

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

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

奇怪的是，当您运行 sn-p 时它可以工作，但当您将 html 保存在 sn-p 中并在本地运行时就不行了。我猜 StackOverflow 中有一些 css 可以解决我的问题，但我不确定问题是什么或如何解决。

编辑：我发现 body 高度是窗口的大小，这限制了 container 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;
}

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

【问题讨论】：

标签： html css

【解决方案1】：

只需要在#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% 将给出其容器的最小高度，即使内容较少且不会超过。

但是，如果由于内容更多，高度超过了容器，那将允许它超过而没有任何问题，因为我们只是限制了它的最小值而不是最大值。

【讨论】：

神圣！这肯定解决了它，但是您需要使用min-height 而height 不起作用似乎有点奇怪。你能解释一下吗？
您希望通过 sidenav 的高度来确定其容器的高度。将其设置为 100% 意味着容器确定 sidenav 的高度。如果您删除 height 和 min-height 它应该可以正常工作。
好吧，这是有道理的，你知道为什么min-height: 100% 有效吗？
在这里找到我的答案：stackoverflow.com/questions/2341821/height100-vs-min-height100 谢谢大家！
欢迎@Rawr。很高兴为您提供帮助。

【解决方案2】：

下面的代码将解决您的问题。

<html>
<head>
<style>
html, body {
 margin: 0;
}
#container {
 margin-top: 50px;
 background-color: lightgreen;
}
#sidenav {
 width: 250px;
 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;
}
</style>
</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% 还解决了如果窗口高度 > container 时缩放 container div 的问题高度。

【解决方案3】：

The simple solution to achieve this is using height:inherit , this will inherit the 100% height of the body tag. 
So, the code change will be :
#container {
    margin-top: 50px;
    height: inherit;  /*change*/
    background-color: lightgreen;
}

#sidenav {
    width: 250px;
    height: inherit;  /*change*/
    display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

or,

First set body height to 100% and then inherit from there.
html, body {
  height: 100%;
  margin: 0;
}

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

#sidenav {
    width: 250px;
    height: inherit;  /*change*/
    display: grid;
    background-color: green;
    align-content: space-between;
    position: relative;
}

【讨论】：

【解决方案4】：

尽管这个问题的答案很少，我也很困扰为什么身高 100% 不起作用我拿了你的代码，在执行你的代码后，如果我们删除高度 100% 或者如果我们保持最小高度，我们会得到预期的结果，但问题并没有在这里结束，因为我很困惑为什么高度 100% 不起作用

为了分析更多，我给包括 HTML 和正文在内的所有部分添加了边框，并且边框清除了我的疑问

现在，如果您看到我们有蓝色边框的图像，我提供给 html 和 body，内容甚至来自 html 和 body

然后我试图找出为什么高度 100% 不起作用

如果我们给高度 100% 它将占用其父级的 100% 高度，即 body

注意：html {height:100%} 与父级高度相关，与内部内容高度无关

比我试图找出什么是 html 和 body 的高度，重要的发现是

您的 html 实际上正好延伸到视口的 100% 高度，这里的视口是浏览器窗口，而不是内部内容

**.

另请参阅下面的问题height and width on html and body elements

现在我们明白了为什么 height 100% 不起作用，如果我们删除 height 它将扩展到其全部内容，如果我们给出 min-height 它的高度等于或大于提到的高度如果我们提到高度，它将采用精确的高度，额外的内容将移出提到的高度

【讨论】：