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.
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
