CSS 全屏布局
🌙
手机阅读
本文目录结构
(1)使用position实现▲
html代码:
<body>
<div id="parent">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
css代码:
html, body, #parent {height: 100%;overflow: hidden;}
#parent > div {border: 1px solid #000;}
#top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
}
#left {
position: absolute;
top: 100px; /*值大于等于#top的高度*/
left: 0;
bottom: 50px; /*值大于等于#bottom的高度*/
width: 200px;
}
#right {
position: absolute;
overflow: auto;
left: 200px; /*值大于等于#left的宽度*/
right: 0;
top: 100px; /*值大于等于#top的高度*/
bottom: 50px; /*值大于等于#bottom的高度*/
}
#bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 50px;
}
原理：计算好盒子的宽度和间隔去设置位置
优缺点：
优点：容易理解；兼容性好 缺点：代码繁多；需要计算好各个盒子的位置；
(2)使用flex实现
html代码:
<body>
<div id="parent">
<div id="top">top</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="bottom">bottom</div>
</div>
</body>
css代码:
*{
margin: 0;
padding: 0;
}
html,body,#parent{height:100%;}
#parent {
display: flex;
flex-direction: column;
}
#top {height: 100px;}
#bottom {height: 50px;}
#middle {
flex: 1;
display: flex;
}
#left {width: 200px;}
#right {
flex: 1;
overflow: auto;
}
原理：flex设置排列方式、对齐方式罢了，请查阅文末flex阅读推荐
优缺点
优点：简单灵活；功能强大 缺点：PC端兼容性不好，移动端（Android4.0+） flex务必带上兼容，写法请参考文末阅读推荐，也可以使用autoprefixer
(3)使用Grid实现
html代码:
<body>
<div id="parent">
<div id="top">top</div>
<div id="left">left</div>
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
css代码:
*{
margin: 0;
padding: 0;
}
html, body, #parent {
height: 100%;
}
#parent {
width: 100%;
height: 100%;
display: grid;
/*分成2列,第一列宽度200px,第二列1fr平分剩余的部分,此处换成auto也行*/
grid-template-columns: 200px 1fr;
/*分成3行,第一行高度100px,第二行auto为自适应,此处换成1fr也行,第3行高度为50px*/
grid-template-rows: 100px auto 50px;
/*定义网格区域分布*/
grid-template-areas:
"header header"
"aside main"
"footer footer";
}
#parent>div{border: 1px solid #000;}
#top{grid-area: header; /*指定在哪个网格区域*/}
#left{grid-area: aside; /*指定在哪个网格区域*/}
#right{grid-area: main; /*指定在哪个网格区域*/}
#bottom{grid-area: footer; /*指定在哪个网格区域*/}
原理：css grid布局，请查看文末的阅读推荐
优缺点
优点：灵活划分网格区域；新型布局利器，适用于页面三维布局 缺点：兼容性不好，移动端（Android5.0+）
清浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清除浮动</title>
<style>
.div1{
width: 500px;
border:3px solid #999999;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.div3{
width: 200px;
height: 300px;
background-color: pink;
float: left;
}
/* 清浮动 */
.clfolat:after{
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 清除浮动的样式 要加在 浮动元素的父元素上 -->
<div class="div1 clfolat">
<!-- 元素浮动的时候，脱离常规的文档流，不占据原来的空间了 -->
<div class="div2"></div>
<div class="div3"></div>
</div>
<p>jigoewjiogjoi</p>
</body>
</html>
