In web design, Sticky footers Design is one of the oldest and most common effects that most people have ever experienced. It can be summarized as follows: If the page content is not long enough, the footer block is pasted at the bottom of the window, if the content is long enough, the footer block will be pushed down by the content. This effect is not only ubiquitous, popular, but also very easy to implement. But actually it takes more time than expected to achieve. In addition, the footer is almost always set to a fixed height in the CSS2.1 solution. This is very fragile and seldom feasible. In fact, it is too complex to achieve this effect, and there is a need to add specific markup and some hack means. There are some limitations in CSS2.1, but using modern CSS, we can do a better job of this effect, how to do it?
1, nesting level is not deep, can directly inherit from body width:100%; height:100%;
html<body> <p id= "sticker" > <p class= "Sticker-con" > I am content </p> </p> <p class= "Footer" > I was feet </p></body>
csshtml,body{ width:100%; height:100%;} #sticker { width:100%; min-height:100%;}. sticker-con{ padding-bottom:40px; 40px for footer itself highly}.footer{ margin-top:-40px; 40px for footer itself height}2, the nesting level is very deep, can not directly inherit the percentage height from the superior
The first method: Create a wrapper for the desired sticker-footer
<body> <p id= "wrapper" > <p id= "sticker" > <p class= "Sticker-con" > I am Content </p > </p> <p class= "Footer" > I'm the foot </p> </p> </body>
. wrapper{ position:fixed; In this way wrapper can inherit the percentage height directly from the html,body Overflow:auto; When the height exceeds 100%, the rolling bar width:100% is generated; height:100%; inherited from Body } //Wrapper internal package structure, as shown above, CSS style is the same3. When the height cannot be obtained by percent, it can also be obtained by JS
CSS style with the first, just sticker min-height with CSS get <body> <p id= "sticker" > <p class= "Sticker-con" > I am content </p> </p> <p class= "Footer" > I am the foot </p> </body> var sticker = Document.queryselector (' #sticker '); var h = document.body.clientHeight; Sticker.style.minHeight = h-44 + ' px '; This approach can also be used to deal with special situations, such as the head navigation bar, can be flexibly handled min-height:4. Powerful Flex layout Flex-direction:column
Display:flex the wrapper container; Flex-direction:column
Sticker:flex:1; Occupy the remaining space except footer
<! DOCTYPE html>Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:
Pure CSS for photo wall 3D effect
CSS Drawing fan pattern
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
