css - 如何将子项的高度填充到另一侧并排的高度;
问题描述
我正在尝试用 css 和 html 做一些块,其中很少有固定高度,例如你看到的 200px,但其他块需要动态/灵活,并且需要被其他高度拉伸。C、G、H 块需要是动态的,并且通过相对的块最大当前高度与内容拉伸。在图片中,您看到块超出区域,C、G、H 块需要在绘制红线的高度;
.clearFix {
clear: both;
}
/* Header blocks */
.headerBlockSection {
color: white;
font-size: 50px;
}
.block-A {
width: calc((100% / 4 * 3) - 10px);
height: 200px;
background-color: #008000;
float: left;
margin-right: 10px;
}
.block-B {
width: calc(100% / 4 * 1);
height: 200px;
background-color: #008000;
float: left;
}
/* Main content sections */
.mainContentSection {
margin-top: 10px;
color: white;
display: flex;
}
.contentSection-1 {
width: calc((100% / 4 * 1));
float: left;
height: auto;
}
.contentSection-2 {
width: calc((100% / 4 * 2) - 20px);
float: left;
margin-left: 10px;
margin-right: 10px;
}
.contentSection-3 {
width: calc((100% / 4 * 1));
float: left;
}
/* Left */
.block-C {
background-color: #f8eb3a;
height: 100%;
}
/* Middle */
.block-D {
height: 150px;
background-color: #316266;
}
.block-E {
margin-top: 10px;
height: 150px;
background-color: #316266;
}
.block-G {
margin-top: 10px;
background-color: #316266;
height: 100%;
}
/*
Right
*/
.block-F {
height: 150px;
background-color: #801a00;
}
.block-H {
margin-top: 10px;
background-color: #801a00;
height: 100%;
}
/* Footer blocks */
.block-I {
margin-top: 10px;
width: 100%;
height: 200px;
background-color: #9ad7ff;
}
<body>
<header class="headerBlockSection">
<div class="block-A">A</div>
<div class="block-B">B</div>
<div class="clearFix"></div>
</header>
<section class="mainContentSection">
<div class="contentSection-1">
<div class="block-C"> C </div>
</div>
<div class="contentSection-2">
<div class="block-D">D</div>
<div class="block-E">E</div>
<div class="block-G"> G </div>
</div>
<div class="contentSection-3">
<div class="block-F">F</div>
<div class="block-H">H</div>
</div>
<div class="clearFix"></div>
</section>
<div class="block-I">I</div>
</body>
解决方案
你看起来像这样吗?
.mainContentSection {
margin-top: 10px;
color: white;
display: flex;
overflow: hidden; /* I added this value*/
}
这是完整的代码。我还在 G 部分添加了一些文本以使其清楚。
.clearFix {
clear: both;
}
/* Header blocks */
.headerBlockSection {
color: white;
font-size: 50px;
}
.block-A {
width: calc((100% / 4 * 3) - 10px);
height: 200px;
background-color: #008000;
float: left;
margin-right: 10px;
}
.block-B {
width: calc(100% / 4 * 1);
height: 200px;
background-color: #008000;
float: left;
}
/* Main content sections */
.mainContentSection {
margin-top: 10px;
color: white;
display: flex;
overflow: hidden; /* I added this value*/
}
.contentSection-1 {
width: calc((100% / 4 * 1));
float: left;
height: auto;
}
.contentSection-2 {
width: calc((100% / 4 * 2) - 20px);
float: left;
margin-left: 10px;
margin-right: 10px;
}
.contentSection-3 {
width: calc((100% / 4 * 1));
float: left;
}
/* Left */
.block-C {
background-color: #f8eb3a;
height: 100%;
}
/* Middle */
.block-D {
height: 150px;
background-color: #316266;
}
.block-E {
margin-top: 10px;
height: 150px;
background-color: #316266;
}
.block-G {
margin-top: 10px;
background-color: #316266;
height: 100%;
}
/* Right */
.block-F {
height: 150px;
background-color: #801a00;
}
.block-H {
margin-top: 10px;
background-color: #801a00;
height: 100%;
}
/* Footer blocks */
.block-I {
margin-top: 10px;
width: 100%;
height: 200px;
background-color: #9ad7ff;
}
<body>
<header class="headerBlockSection">
<div class="block-A">A</div>
<div class="block-B">B</div>
<div class="clearFix"></div>
</header>
<section class="mainContentSection">
<div class="contentSection-1">
<div class="block-C"> C </div>
</div>
<div class="contentSection-2">
<div class="block-D">D</div>
<div class="block-E">E</div>
<div class="block-G"> G <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quas ullam ad eveniet ratione maiores fuga sapiente alias repellendus dolor sequi voluptate quaerat aliquam ut totam, perspiciatis cupiditate molestias? Tempora!
</div>
</div>
<div class="contentSection-3">
<div class="block-F">F</div>
<div class="block-H">H</div>
</div>
<div class="clearFix"></div>
</section>
<div class="block-I">I</div>
</body>
推荐阅读
- android - Firebase:如何在上传文件之前检查文件是否已存在
- javascript - 如何在本机反应中设置超时功能
- ruby-on-rails - 执行 Rails 命令时的 ENV 变量(迁移,其他)
- jquery - 通过 2 个选择列表过滤 html 表格
- xaml - 在 Xamarin 中将 Stepper 值与标签文本绑定
- android - Android web 服务 json 响应合并超级脚本评论®
- sql-server - 存储连接数据库密码的最佳位置
- git - 如何查看具有多个来源的远程分支
- python - 按组按比例分配熊猫列中的随机值
- abap - FOR 表达式和 let 表达式过滤内部表