css实现自适应高度的2:5:3垂直布局
本文介绍如何利用css构建一个三部分垂直布局，各部分高度比例为2:5:3，并能适应不同屏幕分辨率。 目标是让三个子元素填充父容器的整个高度，同时保持比例不变。
我们将使用CSS弹性盒模型（flexbox）实现这一目标。通过设置父元素的display属性为flex，并将其flex-direction属性设置为column，可以轻松地将子元素垂直排列。flex-direction: column指定主轴方向为垂直方向，子元素将从上到下排列。
关键在于利用flex属性控制子元素的高度比例。 每个子元素的flex属性值决定其占据父容器高度的比例。例如，如果三个子元素的flex属性分别设置为2、5和3，则它们将按照2:5:3的比例分配父容器的高度。
以下代码展示了如何实现这个布局：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; flex-direction: column; height: 100vh; /* 占据视口高度 */ /* 可选：垂直居中 */ align-items: center; } .section1 { flex: 2; } .section2 { flex: 5; } .section3 { flex: 3; }
请注意，父元素需要设置height: 100vh;以确保其占据整个视口高度，从而使子元素能够根据视口高度自适应调整。align-items: center; 使子元素在垂直方向上居中对齐，但这并非必须的。
对应的html结构如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* CSS 代码同上 */ </style> </head> <body> <div class="container"> <div class="section1"></div> <div class="section2"></div> <div class="section3"></div> </div> </body> </html>
通过以上CSS代码和HTML结构，即可实现一个自适应不同分辨率的布局，三个子元素始终保持2:5:3的高度比例。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
