设置100vh后容器无法容纳全部内容的原因咨询

嘿，刚接触技术就碰到这类CSS布局问题太正常啦，我来帮你拆解清楚为啥会出现这种情况~

你给#container设置height: 100vh的时候，其实是把容器的高度固定死成了当前浏览器视口（就是你能看到的浏览器页面区域）的100%高度。不管容器里的内容有多少，它的高度都不会再变化——如果内容总高度超过了这个固定的100vh，多出来的部分自然就会“跑”出容器边界，看起来就像是内容“跳”出去了一样。

再看你的代码细节，body还设置了align-items: center和上下margin，这还会额外带来一个小问题：容器本身高度是100vh，加上上下各60px的margin，总高度就超过了视口高度，页面会出现滚动条，但这不是核心问题，核心还是固定高度导致的内容溢出。

想要解决这个问题很简单，把容器的height改成min-height: 100vh就可以了。这个属性的意思是：容器的最小高度是视口高度，如果内容少，容器就保持100vh的高度；如果内容多，容器会自动被内容撑开，完全容纳所有内容。

修改后的CSS代码示例：

body {
  background-color: #878787;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
}

#container {
  min-height: 100vh; /* 把height改成min-height */
  margin: 60px 0 60px;
  background-color: #f8f8f8;
  border-radius: 10px;
  width: 50%;
}

这样调整后，不管你的内容有多少，容器都能完美包裹住它们，同时在内容较少的时候依然保持占满视口高度的效果~

备注：内容来源于stack exchange，提问作者Synxther