The height of the main body is variable, and the footer is at the bottom

Requirement: sometimes, when the content of the page is short, it can't support the height of the browser, but I hope the footer can be at the bottom of the window

There are three solutions provided here. Two ideas are the same and the structure is the same

First and second

html

<div class="wrap">
    <div class="main">

    </div>

</div>
<div class="footer">
    <h1>Page height is not enough, bottom is fixed</h1>
</div>

css

/*The first method*/
* { margin:0; padding:0; }
html, body, .wrap { height:100%; }
.wrap {
    height:auto;
    min-height:100%;
    _height:100%;
    background:#CCC;
}
.main { padding-bottom:80px; }
.footer {
    position:relative;
    height:80px;
    line-height: 80px;
    margin-top:-80px;
    background:#333;
    color:#fff;
    font-size:16px;
    text-align:center;
}

/*The second method*/
.wapper{
    position: relative;   /*Important! Ensure that the footer is absolute relative to the wapper position*/
    height: auto;          /* Ensure that the page can display normally when the browser height is extended*/
    min-height: 100% ; /* IE6 No, IE6 needs to be configured separately*/
    height:100%; /* IE When the height is not enough, it will automatically open the layer*/
}
.footer{
   position: absolute;  bottom: 0; /* crux */
   left:0; /* IE Remember */
   height: 80px;         /* footer The height must be fixed*/

   background:#333;
   color:#fff;
   font-size:16px;
   text-align:center;
   width:100%;
}
.main{
   padding-bottom: 80px; /*Important! Space reserved for footer*/

}

Don't look at the renderings. Just copy them for yourself

The third flex layout

html

<body class="wapper">
    <header>head</header>
    <main class="main-content">
        <p>Realization</p>
    </main>
    <footer>bottom</footer>
</body>

css

   *{margin:0;padding:0}
   .wapper {
       display: flex;
       display: -webkit-flex; /* Safari */
       min-height: 100vh;
       flex-direction: column;
   }
   .main-content {
       flex: 1;
   }
   header,footer{
       height:80px;
       background:gray;
   }
   p{
       padding:80px 0;
       text-align: center;
   }

I've just met this kind of demand before, but I didn't think much about it at that time. Today I was asked about this again, so I'll get to know it

Tags: IE

Posted on Thu, 30 Apr 2020 11:55:22 -0700 by ledtear