-
外部div高度自适应 内部一个【固定高】另一个【自适应高度】
<div id="body"> <div id="header"></div> <div id="main"></div> </div> 1.flex body: display: flex; flex-direction: column; header: height:100px; main: flex-grow: 1; 2.position body: position: relative; header: height:100px; main: position: absolute; top: 100px; bottom: 0; width: 100%; 或者 left:0;right:0
-
圣杯布局
(1)flex 高度一致
<header></header> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> <footer></footer>
header,footer{height: 60px;} #main{display: flex;} #left,#right{width:80px} #center{flex-grow: 1;height:200px}
(2)float 高度取最高
<header></header> <div id="main"> <div id="center"></div> <div id="left"></div> <div id="right"></div> </div> <footer></footer>
header,footer{height:60px;clear:both} #main{ padding-left: 100px; padding-right: 100px; box-sizing: border-box; } #left,#center,#right{float:left} #left{ height: 213px; margin-left: -100%; position: relative; width: 100px; left: -100px; } #right(不浮动){ width: 100px; margin-left: 100%; height: 112px; float: none; } #right(浮动){ width: 100px; height: 143px; right: -100px; position: relative; margin-left: -100px; }
css布局记录
最新推荐文章于 2024-07-18 11:31:54 发布