[Techniques] Tips for solving the problem of floating and blocking content_html/css_WEB-ITnose

Introduction

In today’s front-end pages, especially on mobile devices, it is often necessary to suspend the 1aa9e5d373740b65a0cc8f0a02150c53 or c37f8231a37e88427e62669260f0074d modules Come out and follow the sliding of the page to keep it positioned at the top or bottom of the page, as shown in the figure below.

　

The "Reply Topic" module follows the floating of the page and remains suspended at the bottom of the page. The code structure is as follows.

1 ...2 <section class='footer'>3     <div class='reply-topic'>回复主题</div>4 </section>5 ...

To achieve such a function, of course, we use position:fixed. However, there is a bug in using position: fixed. Take the floating c37f8231a37e88427e62669260f0074d at the bottom as an example (the same goes for floating 1aa9e5d373740b65a0cc8f0a02150c53). When the page slides to the bottom, it is out of the normal document flow due to fixed positioning. , resulting in some content being obscured. As shown below:

　

　The left side above is the problematic display, and the right side is the normal display. So, how to solve this problem? Here, I would like to put forward three of my opinions, hoping to find a better way.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 When sliding to the bottom of the page content, just change the fixed positioning that would originally break away from the document flow to the relative positioning that does not break away from the document flow.

　Using scripts to solve problems is the most arduous method. Try not to use scripts if it can be solved with css, but it is still a method.

Method 2. Add padding-bottom to the body

 1     //滚动条在Y轴上的滚动距离 2     function getScrollTop(){ 3         　　return document.body.scrollTop; 4     } 5     //文档的总高度 6     function getScrollHeight(){ 7  8         　　return document.body.clientHeight; 9     }10     //浏览器视口的高度11     function getWindowHeight(){12         var windowHeight = 0;13 　　　　 if(document.compatMode == "CSS1Compat")14 　　　　{15 　　　　 　　windowHeight = document.documentElement.clientHeight;16 　　　　}17 　　　　else18 　　   {19 　　　　　　windowHeight = document.body.clientHeight;20 　　　　}21 　　　　return windowHeight;22     }23 24     //滑动监听25 　　window.onscroll = function(){26        //滑到底部时footer定于最下方,假定<footer>的height为6027        if((getScrollHeight() - getScrollTop() - getWindowHeight()) > 61)    28            $('.footer').css('position','fixed');        29        else30            $('.footer').css('position','relative');31     }

Add html6c04bd5ca3fcae76e30b72ad730ca86d tag The previous padding-bottom attribute, so that the content of the normal document flow will have a distance set by padding-bottom from the bottom of the body.

The disadvantage is that considering the reuse of modules and the frequent need to merge css files after the project is launched, when other pages do not need this floating block, it will cause a burden on pages that do not require c37f8231a37e88427e62669260f0074dfixed positioning. , this method is not recommended.

Method three. Add same-level placeholders dc6dce4a544fdca2df29d5ac0ea9906b

1 //假定<footer>的高度为60px2 body 3 {4     padding-bottom: 60px; 5 }

Personally I think this method The most practical way is to wrap a layer of div outside the c37f8231a37e88427e62669260f0074d block, and then add a dc6dce4a544fdca2df29d5ac0ea9906b block at the same level as c37f8231a37e88427e62669260f0074d. The height of this dc6dce4a544fdca2df29d5ac0ea9906b block is set to be the same as c37f8231a37e88427e62669260f0074d The same height and does not contain any content, so it can have the effect of a placeholder, occupying the same height space as the c37f8231a37e88427e62669260f0074d at the bottom of the page. Of course, the page will slide to the bottom and the original c37f8231a37e88427e62669260f0074d will be suspended. The block will overlap perfectly with this placeholder block. It will not affect other pages. The code is as follows:

The only disadvantage is that it is not semantic and adds empty tags without substantial content.

　

The above are the three methods I thought of. I have little talent and knowledge. If there are any mistakes or better methods in the article, I hope you can let me know. Thank you.

 1 <!-- footer外包裹一层div--> 2 <div> 3     <!--充当占位符的div块，无实质内容 --> 4     <div style="height:60px;"></div>  5  6     <!--fixed悬浮出来的footer --> 7     <section class='footer'> 8         <div class='reply-topic'>回复主题</div> 9     </section>10 </div>