高度问题(溢出)与 3 列布局

Question

html,body{
height: 100%;
}
#app{
height: 100%;
border: 2px solid black;
}
.row{
	display: flex;
	height: 100%;
}
.col-3 {
	width: 20%;
	background: red;
}
.col-6 {
	width: 60%;
	background-color:blue;
}
#large-item{
height: 100%;
width: 100%;
background: yellow;

}

<div id="app">
	<div class="row">
		<div class="col-3">
			<h2>left column</h2>
		</div>
		<div class="col-6">
			<h2>middle column</h2>
<div id="large-item">Large item</div>
		</div>
		<div class="col-3">
			<h2>right column</h2>
		</div>
	</div>
</div>

我按照 w3cschools 的说明创建了一个 3 列布局。问题是如果我将html，body高度设置为100%，列中的大项目会溢出，这很丑陋。如何使其响应式，例如自动添加滚动条并且背景颜色仍然填充列？

Answer 1

我建议您将.col-6 > h2的高度设置为30px，将#large-item高度设置为calc(100% - 70px);。我们正在减去70px因为30px是 h2 的高度，20px是 h2 的边距(顶部 + 底部 =40px(。所以 30px + 40px 是我们需要减去70px。

更新1：您需要为大项目添加父容器，以便在包含更多内容时看到滚动条。并将其高度设置为calc(100% - 70px);并设置overflow:auto;.要查看滚动条，您可以将大项目的高度设置为500px(例如(。

请参阅代码段。

html,body{
height: 100%;
}
#app{
height: 100%;
border: 2px solid black;
}
.row{
	display: flex;
	height: 100%;
}
.col-3 {
	width: 20%;
	background: red;
}
.col-6 {
	width: 60%;
	background-color:blue;
}
#large-item-container{
overflow:auto;
height: calc(100% - 70px);
}
.col-6 > h2{
height:30px;
}
#large-item{
height:500px;
width: 100%;
background: yellow;

}

<div id="app">
	<div class="row">
		<div class="col-3">
			<h2>left column</h2>
		</div>
		<div class="col-6">
			<h2>middle column</h2>
<div id="large-item-container">
<div id="large-item">Large item</div>
</div>
		</div>
		<div class="col-3">
			<h2>right column</h2>
		</div>
	</div>
</div>

https://jsfiddle.net/nimittshah/rkuf49np/1/

如果您想为整个 col-6 添加滚动条，那就更容易了。您不需要大物品容器。

看到这里

享受！ :)

Answer 2

您只需将large item的高度更改为 92%。

92%是最接近其他列高度的。

html,body{
height: 100%;
}
#app{
height: 100%;
border: 2px solid black;
}
.row{
display: flex;
height: 100%;
}
.col-3 {
width: 20%;
background: red;
}
.col-6 {
width: 60%;
background-color:blue;
}
#large-item{
height: 92%;
width: 100%;
background: yellow;
}