前言

在設(shè)計(jì)左側(cè)固定，右側(cè)自適應(yīng)布局頁(yè)面的時(shí)候，左側(cè)的浮動(dòng)(float)元素一般會(huì)給個(gè)背景色，希望根據(jù)屏幕高度鋪滿整個(gè)屏高。

展示效果

如下圖，左側(cè)黑色背景只顯示一半，希望實(shí)現(xiàn)效果能一直到屏幕底部,并且希望能消除左右兩邊的白色邊距

html代碼

<div class="container1">
 <div class="left">
 <p>左側(cè)菜單欄1</p>
 <p>操作項(xiàng)1</p>
 <p>操作項(xiàng)2</p>
 </div>
 <div class="right">
 <p>這是右邊展示內(nèi)容，右邊展示內(nèi)容，右邊展示內(nèi)容，右邊展示內(nèi)容，寫正文看看</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觸發(fā)bfc*/
 }
 </style>

設(shè)置body高度

設(shè)置最外層html和body的寬高為100，并設(shè)置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容器左邊和最上邊會(huì)有白色邊距

可以通過(guò)設(shè)置html和body的margin: 0來(lái)清楚

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

于是白色邊距去掉了

2021年第 9 期《python接口web自動(dòng)化+測(cè)試開(kāi)發(fā)》課程，10月17號(hào)開(kāi)學(xué)!

加量不加價(jià)（新增postman, 贈(zèng)送selenium和python基礎(chǔ)2個(gè)課）

本期上課時(shí)間：10月17號(hào)-1月9號(hào)，每周六、周日晚上20:30-22:30

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開(kāi)APP，閱讀全文并永久保存查看更多類似文章

CSS中盒模型、浮動(dòng)以及清除浮動(dòng)的方法

理解 CSS 布局和塊級(jí)格式化上下文

CSSBFC規(guī)則的應(yīng)用自適應(yīng)兩欄布局

BFC

關(guān)于自適應(yīng)布局的處理(利用浮動(dòng)和margin負(fù)邊距實(shí)現(xiàn))

如何讓DIV固定在頁(yè)面的某個(gè)位置

更多類似文章 >>

九色国产,午夜在线视频,新黄色网址,九九色综合,天天做夜夜做久久做狠狠,天天躁夜夜躁狠狠躁2021a,久久不卡一区二区三区

前言

展示效果

設(shè)置body高度

清除html和body邊距