网页中“复杂”的布局需求实现
2016-11-01 本文已影响1194人
webCoder
作为一名前端“攻城狮”，实现所有需求的页面布局是最基本的技能。下面的内容，给大家介绍一些复杂的布局。
内容提纲
当页面内容不足一屏的高度时，底部内容出现在屏幕底部；当页面内容高度一屏的高度时，内容处于正常的文档流底部；
效果图：
<!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">这里是主体区域</div>
<div class="footer">这里是底部</div>
</body>
</html>
触屏端页面未知顶部高度，主体容器撑满剩余空间；（现实场景：页面初始化时顶部状态栏是出现的，但是主体容器的内容是需要调接口的，在接口未返回结果前，页面出现loading的动画，且loading在剩余空间内水平、垂直居中）
效果图：
<!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>
触屏端未知顶部、底部高度，中间内容自适应；
效果图：
<!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">这里是主体区域</div>
<div class="footer">
<p>footer</p>
<p>footer</p>
</div>
</div>
</body>
</html>
PC端实现上下高度已知切固定在顶部，主体内容高度占满剩余空间；（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">
这里是主体区域
</div>
<div class="footer">
footer
</div>
</body>
</html>
左中右布局，左侧、右侧宽度固定，中间宽度自适应；
效果图：
<!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>
- 左中右布局，且三列的高度均与根据三列的最大高度保持一致；
效果图：
<!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篇文章）~
