您的位置：首页 > Web前端 > CSS

css让footer始终位于页面的最底部

2016-03-23 22:17 741 查看
html代码结构为：

<div class="container">
<div cass="header"></div>
<div class="body"></div>
<div class="footer"></div>
</div>


第一种情况：footer随着进度条的滚动而滚动

.container{width:100%;min-height:100%;position:relative;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}


第二种情况：footer固定在底部

.container{width:100%;min-height:100%;position:relative;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}


第三种实现方法：让footer固定在底部（转自阮一峰老师博客）

可以使用flex布局，让footer固定在底部。有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。

注意的问题：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

主要代码：

//HTML代码如下
<body class="Site">
<header>...</header>
<main class="Site-content">...</main>
<footer>...</footer>
</body>

//CSS代码如下
.Site {
display: flex;
display: -webkit-flex; /* Safari */
min-height: 100vh;
flex-direction: column;
}

.Site-content {
flex: 1;
}


ps:解释一下vh: vh是相对于视窗的高度,视窗高度是100vh;视窗是指浏览器内部可视区的大小，window.innerWidth、window.innerHeight大小。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css
相关文章推荐
新的分享
章节导航