始终让footer在底部

1.footer保持在页面底部

需求：

我们希望footer能在窗口最底端，但是由于页面内容太少，无法将内容区域撑开，从而在 footer 下面会留下一大块空白

第一种方法：采用 flexbox布局模型

（将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕）

代码：

<div id="container">

    <header>header</header>

    <section class="main">main</section>

    <footer>footer</footer>

</div>

*{

    margin:;

    padding:;

}

html,body{

    height: 100%;

}

#container{

    display: flex;

    flex-direction: column;

    height: 100%;

}

header{

    background: #999;

    flex: 0 0 auto;

}

.main{

    background: orange;

    flex: 1 0 auto;

}

footer{

    background: #333;

    flex: 0 0 auto;

}

第二种方法：采用footer高度固定+绝对定位

（注意：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留（padding-bottom）footer的高度，保证main的内容能够全部显示出来而不被footer遮盖）

代码：

<div id="container">

    <header>header</header>

    <section class="main">main</section >

    <footer>footer</footer>

</div>

*{

    margin:;

    padding:;

}

html,body{

    height: 100%;

}

#container{

    /*保证footer是相对于container位置绝对定位*/

    position:relative;

    width:100%;

    min-height:100%;

    /*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/

    padding-bottom: 100px;

    box-sizing: border-box;

}

header{

    width: 100%;

    height: 200px;

    background: #999;

}

.main{

    width: 100%;

    height: 200px;

    background: orange;

}

footer{

    width: 100%;

    height:100px;   /* footer的高度一定要是固定值*/

    position:absolute;

    bottom:0px;

    left:0px;

    background: #333;

}

第三种：固定在网页底部且居中

html {

height: 100%;

}

body {

margin:;

padding:;

min-height: 100%;

position: relative;

}

#footer{

position: absolute;

left:;

right:;

bottom:;

color: #969696;

text-align: center;

}

附加大佬的常用居中总结：

https://juejin.im/post/58f818bbb123db006233ab2a#heading-6

巴特西

始终让footer在底部

最新文章

热门文章