前言

在设计左侧固定，右侧自适应布局页面的时候，左侧的浮动(float)元素一般会给个背景色，希望根据屏幕高度铺满整个屏高。

展示效果

如下图，左侧黑色背景只显示一半，希望实现效果能一直到屏幕底部,并且希望能消除左右两边的白色边距

html代码

<div class="container1">
 <div class="left">
 <p>左侧菜单栏1</p>
 <p>操作项1</p>
 <p>操作项2</p>
 </div>
 <div class="right">
 <p>这是右边展示内容，右边展示内容，右边展示内容，右边展示内容，写正文看看</p>
 </div>
</div>

css代码

 <style>
 .container1{
 overflow: hidden;
 zoom: 1;
 background: rgba(42, 53, 66, 0.2);
 }
 .left{
 padding-left: 30px;
 color: #aeb2b7;
 float: left;
 width: 200px;
 height: 100%;
 margin-right: 10px;
 background: #232631;
 }
 .right{
 background: white;
 zoom: 1;
 overflow: hidden; /*右边盒子overflow:hidden触发bfc*/
 }
 </style>

设置body高度

设置最外层html和body的宽高为100，并设置container1容器高度100%就可以了

 <style>
 html, body{
 width: 100%;
 height: 100%;
 }
 .container1{
 height: 100%;
 overflow: hidden;
 zoom: 1;
 background: rgba(42, 53, 66, 0.2);
 }

清除html和body边距

container1容器左边和最上边会有白色边距

可以通过设置html和body的margin: 0来清楚

 html, body{
 width: 100%;
 height: 100%;
 margin: 0;
 }

于是白色边距去掉了

2021年第 9 期《python接口web自动化+测试开发》课程，10月17号开学!

加量不加价（新增postman, 赠送selenium和python基础2个课）

本期上课时间：10月17号-1月9号，每周六、周日晚上20:30-22:30

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。