标签：css-常用技巧
下面的 css 和 js 是本文章案例中的公共代码段,默认下面每个小dom都引用了这两段代码
* {
padding: 0;margin: 0;
box-sizing: border-box;
}
html body .hidden {display: none;}
.color-ff7d7d {background-color: #ff7d7d;}
.color-fbbb44 {background-color: #fbbb44;}
.color-beb1cd {background-color: #beb1cd;}
.color-7db9a9 {background-color: #7db9a9;}
.clearfix::after,
.clearfix::before {
display: table;
content: "";
}
.clearfix::after {
clear: both;
}
document.querySelector('#btn').addEventListener('click', function () {
document.querySelector('.wrap .content-text').classList.toggle('hidden');
}, false);
1. 这种 stick footer 的方式会增加一个多余的元素：即下面的div.push元素
body {
font-size: 30px;
line-height: 1.5;
}
body,
html {
height: 100%;
}
.wrap {
height: auto;
min-height: 100%;
margin-bottom: -60px;
overflow: auto;
}
.footer,
.wrap .push {
height: 60px;
overflow: hidden;
}
.footer {
clear: both;
}
<body>
<div class="wrap color-ff7d7d">
<div class="content clearfix color-fbbb44">
<button id="btn" style="display: block;padding: .2em;font: inherit;">显示/隐藏主体内容</button>
<h1 style="font-size: inherit;color: red;">这种 stick footer 的方式会增加一个多余的元素：即下面的div.push元素</h1>
<div class="content-text">
可以在这里添加一个超过视口高度的容器看看效果......
</div>
</div>
<div class="push color-beb1cd"></div>
</div>
<footer class="footer color-7db9a9">
<p>这里是footer</p>
</footer>
</body>
2. footer元素 负margin-top 版本
body {
font-size: 30px;
line-height: 1.5;
}
html,
body {
height: 100%;
}
.wrap {
height: auto;
min-height: 100%;
padding-bottom: 60px;
overflow: auto;
}
.footer {
position: relative;
height: 60px;
margin-top: -60px;
overflow: hidden;
clear: both;
}
<body>
<div class="wrap color-ff7d7d">
<div class="content clearfix color-fbbb44">
<button id="btn" style="display: block;padding: .2em;font: inherit;">显示/隐藏主体内容</button>
<h1 style="font-size: inherit;color: red;">footer元素 负margin-top 版本</h1>
<div class="content-text">
可以在这里添加一个超过视口高度的容器看看效果......
</div>
</div>
</div>
<footer class="footer color-7db9a9">
<p>这里是footer</p>
</footer>
</body>
3. calc版本
body {
font-size: 30px;
line-height: 1.5;
}
.wrap {
min-height: calc(100vh - 60px);
height: auto;
overflow: auto;
}
.footer {
position: relative;
height: 60px;
overflow: hidden;
clear: both;
}
<body>
<div class="wrap color-ff7d7d">
<div class="content color-fbbb44">
<button id="btn" style="display: block;padding: .2em;font: inherit;">显示/隐藏主体内容</button>
<h1 style="font-size: inherit;color: red;">calc版本</h1>
<div class="content-text">
可以在这里添加一个超过视口高度的容器看看效果......
</div>
</div>
</div>
<footer class="footer color-7db9a9">
<p>这里是footer</p>
</footer>
</body>
4. flex 版本
body {
font-size: 30px;
line-height: 1.5;
}
body,
html {
height: 100%;
}
.wrap {
display: flex;
flex-direction: column;
min-height: 100%;
}
.wrap .content {
flex-grow: 1;
}
.wrap .footer {
clear: both;
}
.color-ff7d7d {
background-color: #ff7d7d;
}
.color-fbbb44 {
background-color: #fbbb44;
}
.color-7db9a9 {
background-color: #7db9a9;
}
<body>
<!-- footer元素要包含于div.wrap中 -->
<div class="wrap color-ff7d7d">
<div class="content color-fbbb44">
<button id="btn" style="display: block;padding: .2em;font: inherit;">显示/隐藏主体内容</button>
<h1 style="font-size: inherit;color: red;">flex 版本</h1>
<div class="content-text">
可以在这里添加一个超过视口高度的容器看看效果......
</div>
</div>
<footer class="footer color-7db9a9">
<p>这里是footer</p>
</footer>
</div>
</body>
5. position: fixed 版本
/* 第一步设置盒子为满屏大小 */
body {
font-size: 30px;
line-height: 2;
}
.wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
}
/* 第二步子盒子设置最小高度且清除浮动 给一个padding-bottom 等于footer 避免内容被footer遮盖*/
.wrap .content {
min-height: 100%;
padding-bottom: 100px;
}
/* 第三步footer的height和margin-top要相等 */
.wrap .footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
<body>
<div class="wrap color-ff7d7d">
<div class="content clearfix color-fbbb44">
<button id="btn" style="display: block;padding: .2em;font: inherit;">显示/隐藏主体内容</button>
<h1 style="font-size: inherit;color: red;">position: fixed 版本</h1>
<div class="content-text">
可以在这里添加一个超过视口高度的容器看看效果......
</div>
</div>
<footer class="footer color-7db9a9">这是footer区域</footer>
</div>
</body>
