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添加滚动条，则更加简单。您不需要大型容器。

请参见this

享受！：）

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

3列布局的高度问题（溢出）

2 个答案: