A few weeks to the company app made a HTML5 nested page, the page is not complex, more content, the bottom of the footer
The HTML structure is as follows
<style> . main{ Position:absolute; top:0; bottom:88px; left:0; width:100%; Overflow-y: auto; } footer{ position:fixed; left:0; bottom:0; width:100%; } <style><body> <div class= "main" > ... </div> <footer></footer></body>After the content debugging was done, I inserted some other items, and then the app developer told me to listen to the page scroll let me not use the positioning layout. I see there is no place to enter on the page, there will be no fixed elements run out of things. So the main part is changed to the normal layout, then the bug is:
Everything is OK on Android, IOS10 on the page sometimes footer not show, drag or double-click after the display (other versions of the iOS test that is normal)
The first idea of this problem is to turn the footer Z-index up to 1000, and the result is useless. Carefully observe the pages that are not displayed their content is very short, not to support the position of the footer, conjecture is the body height problem, the body plus style debugging
Background: #fafafa; MIN-HEIGHT:100VH;
The entire page background is actually dimmed, but footer still doesn't show
After discussion with colleagues, guess is that the phone rendered a hierarchy problem, at first footer not rendered, click or Touchmove after the page re-render footer normal.
It was already near the line, in order to solve the bug as soon as possible, to footer set up a tanslatez, so the equivalent of creating a separate level
-webkit-transform:translatez (1px) transform:translate (1px)
There are also 1 layers on the page that are set to z-index,footer with translate layers, indicating a higher level of tranzlatez. The Translatez (2px) of the projectile layer is normal.
This method is not very elegant, but the benefits are not changed in the layout, when the situation is urgent to apply
Related articles recommended:
Introduction to the Holy Grail layout and the two-wing layout in CSS (with code)
How to implement floating element wrapping in CSSStart 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
