HTML：將body按px分紅上下兩部分而不產生滾軸，而且兩部分高度的和等於body的高度。

要作這樣的效果有兩個緣由：

1. 在移動端作web開發，下方的菜單欄通常是使用fixed定位：

將菜單欄固定在可見視窗的最底部。這種作法通常是沒有問題的，可是在如下兩種狀況同時出現就會破壞佈局：

1）內容過多而產生y軸滾軸；

2）內容區域有input等能夠觸發軟鍵盤的標籤。

一旦點擊2）等標籤觸發軟鍵盤，原來fixed就會失效，當屏幕拖動起來菜單欄也會跟着動起來；

固然，這個bug也是能夠用另外一個更簡單的辦法解決（在個人另外一篇博文有詳細的說明）

 

2. 若使用 1 中的佈局方法，當內容足夠多時，最底部的內容就會有一部分被底部的菜單遮擋住，固然也是能夠經過添加：

的方法將被遮擋住的內容「擠」出來。

下面介紹怎麼將body分紅兩部分：

 

先貼上源碼再做解釋(能一眼看懂，就不一樣看下面的解釋了)：

 

如下是解釋（又不夠完善的地方請指出）：

1.將body的高度設爲可見屏幕的高度：

固然，你也能夠經過如下方式上述要求：

可是，在作題目要求的效果時，不建議這樣作，這樣作是達不到題目要求的效果的。

 

設置padding-bottom:50px;是爲了使main標籤的height:100%;產生的效果是body的高度減去50px。

Tip：不要漏了width:100%;

 

2. 將內容放進body的子元素main標籤，並經過overflow屬性使用main溢出的內容能夠經過滾軸的方式展現，添加-webit-overflow-scrolling屬性可使拖動內容時更加順滑，而不是原來的手指放開就當即中止滾動的生硬效果，將內容放進main標籤中的最大緣由就是要解決上面提到的 1）問題，讓發生 1）狀況的時候不會影響到可見屏幕底部的菜單欄。

3. 普通的設置底部菜單欄，沒什麼好解析的。