The mobile terminal solves the three methods that the floating layer (floating header and footer) will block the content, headerfooter

Source: Internet
Author: User

The mobile terminal solves the three methods that the floating layer (floating header and footer) will block the content, headerfooter
This article mainly introduces three methods for mobile terminals to block content on the floating layer (floating header and footer, this article explains how to solve the three methods that the floating layer on the mobile terminal blocks content. For more information, see

In the current front-end pages, especially mobile terminals, the

In the reply topic module, the floating following the page remains at the bottom of the page. The code structure is as follows.


The Code is as follows:
...
<Section class = 'footer '>
<Div class = 'reply-topic '> reply to topic </div>
</Section>
...

Of course, position: fixed is used to implement such a function. However, when position: fixed is used, a bug is found, Taking Floating <footer> at the bottom as an example (floating

There is a problem with the display on the left, and the display on the right is normal. So how can we solve this problem? Here, I hope there will be a better way to put forward three ideas.

Method 1. Solve the problem by using rript

Solve the problem by using js. When sliding the slide to the bottom of the page content, you can change the fixed location that will originally leave the document stream to the relative location that will not leave the Document Stream.

Using scripts to solve the problem is the most arduous method. Using css to solve the problem, try not to use scripts, but it is also a method.

The Code is as follows:
// The scroll distance of the scroll bar on the Y axis
Function getScrollTop (){
Return document. body. scrollTop;
}
// Document height
Function getScrollHeight () {</p> <p> return document. body. clientHeight;
}
// The height of the browser.
Function getWindowHeight (){
Var required wheight = 0;
If (document. compatMode = "CSS1Compat ")
{
Required wheight = document.doc umentElement. clientHeight;
}
Else
{
Optional wheight = document. body. clientHeight;
}
Return optional wheight;
} </P> <p> // sliding listener
Window. onscroll = function (){
// When sliding to the bottom, footer is set to the bottom. Assume that the <footer> height is 60.
If (getScrollHeight ()-getScrollTop ()-getWindowHeight ()> 61)
Condition ('.footer').css ('position', 'fixed ');
Else
Condition ('.footer').css ('position', 'relative ');
}

Method 2: Add padding-bottom to the body

Add a padding-bottom attribute to the html <body> label, so that the content of the normal Document Stream is located at the bottom of the body, and a distance is set by padding-bottom.

The disadvantage is that, considering the reuse of modules after the project is launched and the frequent merging of css files, when this floating block is not required for other pages, this method is not recommended for pages that do not require <footer> fixed positioning.

The Code is as follows:
// Assume that the height of <footer> is 60px.
Body
{
Padding-bottom: 60px;
}

Method 3. Add a placeholder for the same level <div>

I personally think this method is the most practical. Wrap a div outside the <footer> block and add a <div> block at the same level as the <footer> block, the height of the <div> block is set to the same height as that of <footer> and does not contain any content. This gives a placeholder effect, the bottom of the page occupies the same space as <footer>. Of course, when the page slides to the bottom, the original <footer> suspended block perfectly overlaps with the placeholder block. It does not affect other pages. The Code is as follows:

The only drawback is that it does not conform to semantics and adds null tags without substantive content.

The Code is as follows:
<! -- Wrap a div layer outside footer -->
<Div>
<! -- A div block acting as a placeholder with no substantive content -->
<Div style = "height: 60px;"> </div> </p> <! -- Fixed floating footer -->
<Section class = 'footer '>
<Div class = 'reply-topic '> reply to topic </div>
</Section>
</Div>

The above are the three methods I have come up with. I would like to tell you if there are any mistakes or better methods in this article. Thank you.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.