search

Seasons123 / blog-FE

web前端相关issue is my blog :lollipop:
2 stars 0 forks source link

stick footer布局 #46

Open Seasons123 opened 6 years ago

Seasons123 commented 6 years ago

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

html代码结构为：

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

第一种情况：footer随着进度条的滚动而滚动 这个在文章内容不足满屏时 footer不在底部，这种写法只满足随着滚动条的滚动而滚动 :-1: 

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

第二种情况：footer固定在底部 :100: 我原来做的项目中是采用的这种方式

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

第三种实现方法：让footer固定在底部（转自阮一峰老师博客） :1234: 在实际的项目中一直没做尝试 可以使用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大小。

Seasons123 commented 6 years ago

第一种情况 :100: :+1: :1st_place_medal:

需求:将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。 这个方案亲自实践过，可以 :fallen_leaf: :

html部分

<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content"></div>
        <div id="side"></div>
    </div>
</div>
<div id="footer"></div>

css部分

<style>
* {
    padding: 0;
    margin: 0;
    font-size: 20px;
}

html, body, #wrap {
    height: 100%;
}

body > #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 150px; /*必须使用和footer相同的高度 */
} 
#footer {
    position: relative;
    margin-top: -150px;  /*footer高度的负值 */
    height: 150px;  
    clear: both;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}
</style>

关键：就是加注释的那两行：

#main {
    padding-bottom: 150px; /*必须使用和footer相同的高度 */
}

相当于是底部撑出一个高度来，这样底部就避免内容长的时候被它盖住 详细讲解可以看这篇 ，思路就是：

  1. 先实现 最小高度满一屏的自适应布局
  2. 加上页头页脚和内容部分，为了让 footer 在最下方，我们当然要把 footer“请出”wrap 之外。当然， 这样高度就超过一屏了，别急，后面有解决办法。
  3. 为了让 footer 能够刚好在最下方，我们能给 footer 加一个等于自身高度的上方的负边距强制把他向上推一个自身的高度，即 margin-top: -150px; 。不过这样的话当内容超过一屏我们会看到内容会盖在 footer 的上方，显然这是失败的。所以我们还要给 content和 side加一个父级元素mian，设定他的下方内补丁等于 footer 的高度，强制把 content和 side 向上推一个 footer 的高度。同时，因为 content 和 side 是浮动元素，所以我们还要让他 闭合浮动元素 。 这样就比较完美了。
Seasons123 commented 6 years ago

第二种情况

footer固定在底部。就是当内容区域比较少时，让footer也能正常定位到底部，以前我们使用js来达到这种效果，其实用css也是完全可以的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>sticky footer</title>
  <style type="text/css">
  /* 第一步设置盒子为满屏大小 */
    .box{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      overflow: auto;
      background: green;
    }
    /* 第二步子盒子设置最小高度且清除浮动 */
    .box .main{
      width: 100%;
      min-height: 100%;
    }
    .box .main .content{
      background: orange;
    }
    /* 第三步footer的高度和margin-top要相等 */
    .box .footer{
      position: relative;
      width: 100%;
      height: 100px;
      background: #f3f3f3;
      margin: -100px auto 0 auto;
      clear: both;
      text-align: center;
    }
    .clearfix{
      display: inline-block;

    }
    .clearfix::after{
      content: ".";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="main clearfix">
      <div class="content">
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
      </div>
    </div>

    <div class="footer">这是footer区域</div>
  </div>
</body>
</html>

效果： 1