粘连布局
<!DOCTYPE html>
<html>
<head>
<title>移动端的粘连布局</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<style type="text/css">
* {
margin:0;
padding:0;
}
body,html {
height:100%
}
body {
font-size:14px;
line-height:1.5em;
}
.container {
padding-bottom:30px;
width:400px;
min-height:500px;
background-color:rgb(164, 219, 253);
}
.footer {
margin-top:-30px;
width:400px;
height:30px;
line-height:30px;
background-color:lightyellow;
}
</style>
</head>
<body>
<div class="container">
<p>内容区。最为整个页面最关键的信息区域,至关重要!</p>
<p>内容区。最为整个页面最关键的信息区域,至关重要!</p>
<p>内容区。最为整个页面最关键的信息区域,至关重要!</p>
<p>内容区。最为整个页面最关键的信息区域,至关重要!</p>
<p>粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。
而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面。
</p>
<p>粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。
而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面。
</p>
<p>粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。
而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面。
</p>
<p>粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。
而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面。
</p>
<p>粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。
而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面。
</p>
</div>
<div class="footer">
<p>固定在地步的区域</p>
</div>
</body>
</html>
粘连布局:即是当内容区的内容未超过最小高度时,footer通过设置marign-top的负值紧挨在内容区底部。 而当内容区的内容超过此高度后,内容区通过设置padding-bottom的值footer紧挨在内容区后面,从而实现一个底部栏固定的效果。