Implement stick footer Layouts

implement stick footer layouts What is stick footer Implementation Method Summary Stick Footer Layout Introduction

Stitck footer Layout is now more common on mobile phones, usually fixed a close button in the footer of an interface, when the page content does not fill the page, the Close button will still be in the footer. When the page content exceeds the page. At this point, the Close button will also move down with it. Implementation Method Design

Container represents the container, content represents the contents area, in the content area according to their own needs can be divided into a lot of div,close is defined in the footer div is usually a close button or icon

<div class= "Container" >
<div class= "Content" >
<div class= "Content-main" ></div>
</div>
<div class= "Close" > Close </div>
</div>
CSS writing for container and content

  HTML,
      body {
        height:100%;
        margin:0;
        padding:0;
      }
      . container {
        height:100%;
      }
      . Content {
        min-height:100%;
        border:1px solid red;
      }
      . content-main{
        padding-bottom:32px;
        margin-top:32px;
        border:1px solid black;
      }
      . close{
        height:32px;
      }

If Content-main has no content, the effect of the following image appears:


Written in the above style, you can find that the height of the content area is always 100% height, and the off button missing is in the content above, so we need to put the footer in close style writing

. close{
        height:32px;
        position:relative;
        Margin: -32px auto;//here when the content is insufficient, the footer from the page out of the
        Background:rgb (7,17,27);
        Clear:both;
      }

Some of the effects are shown below:
Summary

Before writing the article did not want to write a summary, but in the process of writing the article I would like to think of something, why the content will be set to set a padding-bottom for 32px, do not want to reflect what. But if your content has a border that fills the entire page, our footer will just occupy the bottom of the padding and let our entire page just fill up, which is why it's worth setting this up.