CSS sticky Footer

  • When main is long enough, the element <\footer> that follows <\main> will follow it;

  • When the <\main> element is short (i.e. less than the height of the screen), we expect the <\footer> element to “stick” to the bottom of the screen.

  • There are three components: the wrap container, the main contents, and the footer foot

Select * from footer where margin-top is negative

  • You need an extra layer of wrap around the content to give it the padding-bottom. To prevent negative margin from causing footer to overwrite any actual content.
// HTML structure <body> <div id="wrap">
	<div id="main">
		main<br/>
		main<br/>
	</div>
</div>
<div id="footer"Word-wrap: break-word! Important; ">< div style =" text-align: center; margin: 0; }#wrap{width: 100%; min-height: 100%; } /* The content area needs to be vacated to prevent the content from being covered */#main{padding-bottom: 30px; } // The minimum height of the wrap is 100%, and then pull the footer up 30px by the margin-top.#footer{
    width: 100%;
    height: 30px;
    background-color: yellow;
    margin-top: -30px;
}
Copy the code

Method 2: negative margin-bottom

  • Wrap everything but the footer in an element. Set a negative margin-bottom so that it is equal to the height of the footer. This is the most basic method.
<body>
  <div class="wrapper">
      content
    <div class="push"></div>
  </div>
  <footer class="footer">< span style = "text-align: center; text-align: center; text-align: center; margin: 0; } .wrapper { min-height: 100%; margin-bottom: -50px; } .footer, .push { height: 50px; }Copy the code

Method three: Flex layout

  • Fixed height is usually not good in Web design, content can change, and we need footer flexibility. Fixed height is usually red. Not only does flexbox not require any additional elements to adhere to footers, but it also supports variable heights for footers.
// HTML structure <body> <div class="content">
    content
  </div>
  <footer class="footer">< span style = "text-align: center; text-align: center; } body { min-height: 100%; display: flex; flex-direction: column; } .content { flex: 1; } .footer{ height: 50px; background-color: red; }Copy the code
  • You can even add a header to the front of the.content or more to the back. The trick to using the Flexbox is:
  • Set Flex: 1 on the child elements you want to automatically fill the window space (in our case, the.content element).
  • You can set margin-top:auto to make the child element as far away from the element in front of it as possible (or select a margin in either direction as needed). < span style = “margin-bottom:auto” style = “margin-bottom:auto” style = “margin-bottom:auto; margin-bottom:auto;