【原】python测试开发django-135.CSS如何让左侧浮动(float)元素占满屏幕高度

前言

在设计左侧固定，右侧自适应布局页面的时候，左侧的浮动(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