CSS页面底部固定的6种方法

CSS页面底部固定的6种方法

方法 一、 footer高度固定+绝对定位

 <div class="w">
        <div class="head"></div>
        <div class="content"></div>
        <div class="foot"></div>
   </div>
.w{
         position: relative;
    }
       .head{
           width: 100%;
           height: 100px;
           background-color: yellow;
        }
        .content{
            width: 100%;
            height: 300px;
            background-color: red;
            padding-bottom: 100px;
        }
        .foot{
            height: 100px;
            width: 100%;
            background-color: blue;
            position: absolute;
            bottom: 0;
        }

方法二、在主体content 上的下边距增加一个负值等于底部高度

<header>Header</header>
    <main>Content</main>
    <footer>Footer</footer>
html,body {
            height: 100%;
        }

        main {
            min-height: 100%;
            padding-top: 100px;
            padding-bottom: 100px;
            margin-top: -100px;
            margin-bottom: -100px;
            background-color: blue;
        }

        header,
        footer {
            line-height: 100px;
            height: 100px;
            background-color: red;
        }

方法三、通过设置flexbox ,将主体margin设置为 flex

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

body{
    dispaly:flex;
    min-height:100vh;
    flex-direction:column;
}
main{
    flex:1
}

方法四：通过函数calc()计算内容的高度

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
main{
    min-height:calc(100vh-200px);//这个px是header和footer的高度
}

方法五：通过设置flex,将footer的margin-top设置为auto

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}