Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use div to fix to the bottom of the navigation bar in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Demand:

Need to fix the navigation at the bottom? You can only slide the content, and the navigation menu is fixed.

This article mainly explains three implementation schemes, including: fixed,absolute, and the flex layout of css3.

The structure of html is as follows:

Fixed menu at the bottom of the scrolling area html,body {margin:0;padding:0;height:100%;width:100%;} footer {background:#F2F3F6;max-width: 750pxcontrol width: 100% leadership height: 1rem;} method 1: use fixed.box {.roll {padding-bottom:1rem;} footer {position:fixed;bottom:0;z-index:999 }} method 2: use absolute.box {position: relative;height: 100%; .roll {position: absolute;bottom:1rem;top: 0th overflow: scroll;-webkit-overflow-scrolling: touch;height: auto;} footer {position: absolute;bottom:0;} method 3: use flex.box {display:flex;display:-webkit-flex;height:100%;flex-direction:column .roll {flex: 1; width: 100% overflow: scroll;-webkit-overflow-scrolling: touch;height: summary}}

1. When the bottom is defined as fixed or absolute, the priority is low, resulting in being overwritten by other div, so z-index is needed here to make it the highest level so that it will not be overwritten.

2. The bottom is positioned as fixed or absolute. When there is an input box, the following occurs:

Ios: when the input box is activated, the bottom will not pop up (reasonable).

Android: when the input box is activated, the bottom will pop up with the input box (unreasonable)

Traditional solution: usually set the bottom to fixed, when activating the input box, change the bottom positioning to relative, which is compatible with ios and Android.

3. To use method 2 or method 3, you need to set the-webkit-overflow-scrolling attribute. This ensures the fluency of the scrolling area, and the-webkit-overflow-scrolling controls whether the element uses the scrolling springback effect on the mobile device.

4. When you set overflow-y: scroll; in some browsers, a scroll bar appears. In this case, we need to define the following styles globally:

::-webkit-scrollbar {/ / scroll scroll bar sets width: 0px; height: 0px; color: rgb (136,0,0); "> # fff;}

5. The layout form of method 3 is recommended for mobile devices.

This is the end of the content of "how to use div to fix to the bottom of the navigation bar in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.