无论页面是否包含内容，如何使我的页脚位于每个页面的底部? [英] How to keep my footer on the bottom of every page regardless if the page has content or not?
本文介绍了无论页面是否包含内容，如何使我的页脚位于每个页面的底部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用默认的Web应用程序MVC项目，如果我在页面上没有太多内容，则页脚将上升.如何使页脚始终保持在页面底部?
Im using the default Web Application MVC project and if i dont have much content on the page the footer is going up. How can i make the footer to stay always on bottom of the page?
我的html结构是这个
my html structure is this
<body>
<div class="body-content"><div>
<footer></footer>
</body>
推荐答案
<!doctype html>
<html>
<head>
<title>Sticky footer</title>
<meta charset="UTF-8"/>
<style>
html, body {
height: 100%;
background: #e4e4e4;
margin: 0px;
padding: 0px;
}
.wrapper {
min-height: 100%;
width: 100%;
}
.main {
clear: both;
overflow: auto;
padding-bottom: 100px;
}
footer {
margin-top: -100px;
background-color: #1b1e25;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<p>Some content</p>
</div>
</div>
<footer>
<p>footer</p>
</footer>
</body>
</html>
原始来源: http://www.cssstickyfooter.com/
这篇关于无论页面是否包含内容，如何使我的页脚位于每个页面的底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
