个人纪录所用（误人子弟概不负责）
圣杯布局
圣杯布局这个东西已经是很久以前的东西了 虽然说现在有很多其他的方法可以实现 但是我觉得还是有学习的价值的
快捷键
<div class="wrapper1">
<div class="center">
<p>这是中间</p>
</div>
<div class="left">
<p>这是左边</p>
</div>
<div class="right">
<p>这是右边</p>
</div>
</div>css
.wrapper1{
padding: 0 200px;
}
.wrapper1>div{
min-height: 100px;
float: left;
}
.wrapper1 .center{
width: 100%;
background-color: yellow;
}
.wrapper1 .left{
width: 200px;
background-color: red;
margin-left: -100%;
position: relative;
left: -200px;
}
.wrapper1 .right{
width: 200px;
background-color: blue;
margin-right: -100%;
}双飞翼
<div class="wrapper2">
<div class="center-wrapper">
<div class="content">zzz</div>
</div>
<div class="left">
<p>这是左边</p>
</div>
<div class="right">
<p>这是右边</p>
</div>
</div>
.wrapper2 div{
min-height: 100px;
}
.wrapper2 .center-wrapper,.wrapper2 .left,.wrapper2 .right{
float: left;
}
.center-wrapper{
width: 100%;
background-color: yellow;
}
.wrapper2 .left{
width: 200px;
background-color: red;
margin-left: -100%;
}
.wrapper2 .right{
background-color: blue;
width: 200px;
margin-left: -200px;
}
.content{
margin: 0 200px;
background-color: green;
}这两种布局本质上没有很大的区别 在我看来无非是让中间元素显示的方式不同 圣杯布局可以想着它比较霸道 用padding撑开了盒子 让left right自己去找地方待 双飞翼布局 中间的内容多嵌套了一个div 内div使用margin可以想做是你们牛 我给你们让地方 最最需要注意的是float+margin的负边距所达到的特效 这个需要自己去体会了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粘性底部</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<!-- 父级relative 实现 -->
<section class="demo1">
<style type="text/css">
html,body{
height: 100%;
}
.demo1{
height: 100%;
}
.wrapper1{
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.head{
width: 100%;
background-color: red;
height: 50px;
}
.footer{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: #ddd;
}
</style>
<article class="wrapper1">
<div class="head">
<p>hello</p>
</div>
<div class="content">
<p>hello im content</p>
<p>hello im content</p>
<p>hello im content</p>
<p>hello im content</p>
<p>hello im content</p>
<p>hello im content</p>
</div>
<div class="footer">
<p>hello in footer</p>
</div>
</article>
</section>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickyfoorer</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
position: fixed;
overflow: auto;
flex-direction: column;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.container{
width: 100%;
min-height: 100%;
box-sizing: border-box;
padding-bottom: 50px;
}
.container .head{
width: 100%;
height: 50px;
background-color: red;
}
.footer{
width: 100%;
height: 50px;
margin-top: -50px;
background-color: black;
}
</style>
</head>
<body>
<!-- 假设这是一个弹出层 -->
<div class="wrapper">
<div class="container">
<div class="head"></div>
<p>zz</p>
<p>zz</p>
<p>zz</p>
<p>zz</p>
<p>zz</p>
<p>zz</p>
</div>
<div class="footer"></div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickyfooter</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{height: 100%;}
.wrapper{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.head{
flex: 0 0 50px;
background-color: red;
}
.content{
flex: 1;
background-color: yellow;
}
.footer{
flex: 0 0 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="head">
<p>hello head</p>
</div>
<div class="content">
<p>hello content</p>
</div>
<div class="footer">
<p>hello footer</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickyfooter</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
width: 100%;
height: 100vh;
}
.head{
width: 100%;
height: 50px;
background-color: red;
}
.content{
width: 100%;
min-height: -moz-calc(100% - 100px);
min-height: -webkit-calc(100% - 100px);
min-height: calc(100% - 100px);
background-color: yellow;
}
.footer{
width: 100%;
height: 50px;
background-color: black;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="head">
<p>hello head</p>
</div>
<div class="content">
<p>hello content</p>
</div>
<div class="footer">
<p>hello footer</p>
</div>
</div>
</body>
</html>