作為一名前端“攻城獅”，實現(xiàn)所有需求的頁面布局是最基本的技能。下面的內(nèi)容雹洗，給大家介紹一些復(fù)雜的布局。
內(nèi)容提綱
當(dāng)頁面內(nèi)容不足一屏的高度時卧波，底部內(nèi)容出現(xiàn)在屏幕底部时肿；當(dāng)頁面內(nèi)容高度一屏的高度時，內(nèi)容處于正常的文檔流底部港粱；
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body {
display: table;
width: 100%;
}
.main{
/*height: 2000px;*/
background: #000;
color: #fff;
}
.footer{
background: #f00;
display: table-footer-group;
}
</style>
</head>
<body>
<div class="main">這里是主體區(qū)域</div>
<div class="footer">這里是底部</div>
</body>
</html>
觸屏端頁面未知頂部高度螃成，主體容器撐滿剩余空間；（現(xiàn)實場景：頁面初始化時頂部狀態(tài)欄是出現(xiàn)的查坪，但是主體容器的內(nèi)容是需要調(diào)接口的寸宏，在接口未返回結(jié)果前，頁面出現(xiàn)loading的動畫偿曙，且loading在剩余空間內(nèi)水平氮凝、垂直居中）
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
.wrap{
display: flex;
flex-direction: column;
height: 100%;
}
.head{
background: #000;
color: #fff;
text-align: center;
}
.loading{
position: relative;
background: #f00;
flex-grow: 1;
}
.loading-content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="head">
<p>head</p>
<p>head</p>
</div>
<div class="loading">
<div class="loading-content">loading...</div>
</div>
</div>
</body>
</html>
觸屏端未知頂部、底部高度望忆，中間內(nèi)容自適應(yīng)罩阵；
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.wrap{
display: flex;
flex-direction: column;
height: 100%;
}
.header{
background: #000;
color: #fff;
text-align: center;
}
.main{
flex-grow: 1;
background: #f00;
color: #fff;
}
.footer{
background: #007fff;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">
<p>header</p>
<p>header</p>
</div>
<div class="main">這里是主體區(qū)域</div>
<div class="footer">
<p>footer</p>
<p>footer</p>
</div>
</div>
</body>
</html>
PC端實現(xiàn)上下高度已知切固定在頂部，主體內(nèi)容高度占滿剩余空間启摄；（PC端對于flexbox有兼容性問題）
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.oh{
overflow: hidden;
}
.header{
position: absolute;
top: 0;
width: 100%;
height: 100px;
line-height: 100px;
background: #000;
color: #fff;
text-align: center;
}
.main{
height: 100%;
padding: 100px 0;
background: #f00;
color: #fff;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
line-height: 100px;
background: #007fff;
color: #fff;
text-align: center;
}
</style>
</head>
<body class="oh">
<div class="header">
header
</div>
<div class="main">
這里是主體區(qū)域
</div>
<div class="footer">
footer
</div>
</body>
</html>
左中右布局稿壁，左側(cè)、右側(cè)寬度固定歉备，中間寬度自適應(yīng)傅是；
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
*+height: 1%
}
.left{
float: left;
width: 200px;
height: 100px;
background: #000;
color: #fff;
margin-left: -100%;
}
.right{
float: left;
width: 100px;
height: 100px;
background: #000;
color: #fff;
margin-left: -100px;
}
.middle{
float: left;
width: 100%;
background: #f00;
color: #fff;
}
.middle-content{
margin: 0 100px 0 200px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="middle">
<div class="middle-content">
middle
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
- 左中右布局，且三列的高度均與根據(jù)三列的最大高度保持一致威创；
效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
.clearfix {
*+height: 1%
}
.left{
float: left;
width: 200px;
background: #000;
color: #fff;
margin-left: -100%;
}
.right{
float: left;
width: 100px;
background: #000;
color: #fff;
margin-left: -100px;
}
.middle{
float: left;
width: 100%;
background: #f00;
color: #fff;
}
.middle-content{
margin: 0 100px 0 200px;
}
.wrap{
overflow: hidden;
}
.height{
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="middle height">
<div class="middle-content">
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
<p>middle</p>
</div>
</div>
<div class="left height">left</div>
<div class="right height">right</div>
</div>
</body>
</html>
希望這篇文章對您有用（最后附上2篇文章）~
