1.头部固定
1.效果
实现头部header 一直固定在顶部，不因为中间和底部内容滚动而变化。
2.实现
使用postion : sticky 粘性布局。
<html>
<head>
<style>
body{
padding: 0;
margin: 0;
}
.outer{
text-align: center;
font-size: 40px;
}
.banner{
height: 100px;
background-color: yellow;
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
position:sticky;
top: 0;
}
ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
height: 100px;
}
ul li{
flex: 1;
border: 1px solid black;
font-size: 30px;
}
.content{
background-color: gainsboro;
min-height: calc(100vh - 300px); /*默认设置 最小高度*/
}
.footer{
background-color: burlywood;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="banner">
标题头
</div>
<div class="inner header">
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
</div>
<div class="inner content">
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
<ul><li>xxx</li><li>xxx</li><li>xxx</li></ul>
</div>
<div class="inner footer">
底部
</div>
</div>
</body>
</html>
2.底部动态固定
1.原理
- 内容少的时候，footer置底固定
- 内容多的时候，footer自动被撑开
2.实现
已知
<html>
<head>
<style>
body{
padding: 0;
margin: 0;
}
.outer{
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
}
.content{
background-color: gainsboro;
min-height: 500px;
}
.footer{
background-color: burlywood;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner header"></div>
<div class="inner content"></div>
<div class="inner footer"></div>
</div>
</body>
</html>
实现 底部footer 粘性布局效果。
2.1 calc(100vh - 200px)
使用vh获取当前视窗的高度，减去头尾共200px就是剩下中间的最大高度
.outer{
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
}
.content{
background-color: gainsboro;
min-height: calc(100vh - 200px); /* 只需要一行最小高度设置即可*/
}
.footer{
background-color: burlywood;
height: 100px;
}
2.2 min-height: 100% + absolute + bottom :0
- 通过最外容器为min-height: 100%;，使得最小尺寸依然能撑满一屏
- .content 设置padding-bottom 设置预留与底部的距离高度
- 底部bottom固定使用absolute绝对定位 ，显示的位置随着content的变化而变化。
.outer{
position: relative;
min-height: 100%;
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
}
.content{
background-color: gainsboro;
padding-bottom: 2000px; /*这里相当于一直保留底部高度，即未实际能使用的高度已经减去了底部的100px*/
}
.footer{
background-color: burlywood;
height: 100px;
position: absolute;
bottom: 0;
}
2.2 flex-direction: column + calc(100vh - 200px)
.outer{
display: flex;
flex-direction: column;
min-height: 100vh; /* 设置最小高度为当前屏幕 min-height: 100%;也可以*/
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
}
.content{
background-color: gainsboro;
flex: 1; /* 父容器的剩下自动填充 */
}
.footer{
background-color: burlywood;
height: 100px;
}
2.3 grid
.outer{
display: grid;
grid-template-rows: auto 1fr auto; /* 中间设置1fr 父容器的剩下自动填充 */
min-height: 100vh; /* 设置最小高度为当前屏幕 min-height: 100%;也可以*/
}
.inner{
width: 100%;
}
.header{
background-color: yellowgreen;
height: 100px;
}
.content{
background-color: gainsboro;
}
.footer{
background-color: burlywood;
height: 100px;
}
