使用css方法使footer保持在页面的最底部

使footer保持在页面的底部，是常见的需求，之前面试的时候也遇见了一个这样的问题，今天在这里记录下css实现的方式。

使footer保持在页面的底部，需要考虑header+content部分不够多的情况，在页面下方会留出部分的空白，如：

 

方法一：采用绝对定位方式。

html代码：

<body>
    <div class="container">
        <header>header</header>
        <section>content</section>
        <footer>footer</footer>
    </div>
</body>

css代码：

body,html{
  height: 100%;  
}
.container{
    position:relative;
    padding-bottom:150px; //此次为footer的高度或大于footer的高度
    width:100%;
    min-height: 100%;
    box-sizing: border-box;
}
header{
    width: 100%;
    height: 100px;
}
section{
    width: 100%;
    height: 300px;
}
footer{
    position:absolute;
    width:100%;
    height: 150px;
    left: 0;
    bottom: 0;
}

 

方法二：flex布局

注意：设为flex布局之后，子元素的float、clear和vertical-align属性将失效

完成图示：

 

HTML代码：

<body>
    <div class="container">
        <header>header</header>
        <section>content</section>
        <footer>footer</footer>
    </div>
</body>

　　

CSS代码：

body, html{
    height: 100%;
}
.container{
    display: flex；
    height: 100%;
    flex-direction: column;  //主轴方向
}
header{
    width: 100%;
    header: 100px;
    flex: 0 0 auto;  //flex： none | flex-grow  flex-shrink flex-basis
} section{ width: 100%; height: 300px; flex: 1 0 auto; } footer{ width: 100%; height: 150px; flex: 0 0 auto; }

解析：

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

 

posted on 2018-10-11 13:57  bala001  阅读(712)  评论(0)  编辑  收藏  举报

导航