Question

这是一个codepen。更改视图高度时，请注意紫色元素。他们溢出我想一劳永逸地杀死这条龙 - 更重要的是 - 了解发生了什么，所以我再也不用打扰你了。

https://codepen.io/colbisaurusrex/pen/WpXVxY

 body {
  background-color: #34495E;
  padding: 5%;
}
.container {
  height: 100vh;
  display: flex;
}
.columnleft {
  background-color: #2ECC71;
  height: 100%;
  width: 30%;
  margin-right: 10%;
}

.leftbox {
  margin: 10%;
  height: 100%;
}

.box {
  display: flex;
  background-color: #1ABC9C;
  margin: 10%;
  height: 40%;
}

.innerbox {
  background-color: #3498DB;
  height: 96%;
  width: 47%;
  margin: 2%;
}


.columnright {
  background-color: #2ECC71; 
  height: 100%;
  width: 60%;
}

.row {
  display: flex;
  height: 40%;
  background-color: #9B59B6;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
}

.rowone {
  margin-top: 5%;
  margin-bottom: 5%;
}

.rowtwo {
 margin-bottom: 5%;
}

Answer 1

好的，我在你的代码中看到，你正在使用flex buuut ......不是真的。

我已更正了您的columnright，但如果您了解，则可以对columnleft执行相同操作。

你想要达到的目标是让列内的元素具有相同的＆＃34; height＆＃34;占据了整个空间。

所以这是更正后的CSS：

.columnright {
  background-color: #2ECC71;
  height: 100%;
  width: 60%;
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex: 1;
  background-color: #9B59B6;
  width: 80%;
  margin-right: 10%;
  margin-left: 10%;
  margin-top: 20px;
}

.rowtwo {
  margin-bottom: 20px;
}

从rowone中删除所有内容。

我使用的是flex属性，用于定义元素占用的空间大小。在这里，每个元素将占用1个单位的空间，因此每个元素的高度相同。我还为每个元素添加了一个margin-top来创建一个＆＃34; internal＆＃34;填充和最后一个元素的边距底部。

此外，这是更正后的CodePen：https://codepen.io/anon/pen/vxpBjM

Answer 2

好的，让我们举一个例子吧。你有一个名为columnright的元素。在其中，您有rowone和rowtwo。

rowone的渲染高度和边距为：

height: 40%;
margin-top: 5%;
margin-bottom: 5%;

rowtwo的渲染高度和边距为：

height: 40%;
margin-bottom: 5%;

所以40% + 5% + 5% + 40% + 5% = 95%，对吗？它不应该溢出吗？ 实际上不是

问题：

如CSS box model spec中所述：

[margin]百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。

因此，当您设置上边距/下边距时，它相对于宽度而不是高度。如果您的元素是矩形（在示例中为您的），它会在某个时刻溢出，因为width高于height。

您可以采取的措施：

嗯，如果父元素具有已定义的高度，最好不要使用百分比边距。除此之外，如果符合您的需要，您可以从父项中删除height

Answer 3

总是欢迎好的问题。毕竟，这是一个我们自愿帮助他人的网站，所以只要进行有意义的知识交流，它就会变得麻烦。

将overflow: hidden，overflow: auto或overflow: scroll属性添加到包含<div> s＆＃39;样式，取决于您希望实现的效果。有关overflow:属性的详细信息，请参阅w3schools。

overflow:属性还有两种子类型，特别是overflow-x:和overflow-y:，如果您愿意，每种都可以有单独的值。

当视图高度/宽度发生变化时，如何使子元素保留在父元素中？

3 个答案: