在页面布局中,经常会遇到左右两边的高度不一样的情况。解决这个问题的一种方法是使用CSS让两边的高度都到达页面底部。 .container { display: flex; min-height: 10
在页面布局中,经常会遇到左右两边的高度不一样的情况。解决这个问题的一种方法是使用CSS让两边的高度都到达页面底部。
.container { display: flex; min-height: 100vh; } .left { flex: 1; margin-right: 20px; } .right { flex: 1; margin-left: 20px; }
以上代码基于Flexbox布局,并使用了min-height属性来确保容器至少占据整个视口的高度。.left和.right两个元素使用了相同的flex属性,使它们在宽度方面平分容器的宽度,同时使用margin将它们分开。
这样做确保了无论哪一边的内容长度有多长,两边的高度都将自动调整以填满整个视口。
粉丝
0
关注
0
收藏
0