css的小小height引發的頁面bug

2021-09-19 13:18:02 字數 720 閱讀 2219

環境:移動端瀏覽器

瀏覽公司**的時候,偶然發現,往上滑動的時候,超出瀏覽器高度的部分沒有了。

今天試了很久,終於找到問題所在。

bug復現條件:按著header區域,然後拖住往上滾動,會出現下圖,必須觸發的窗體是整個body,如果是按著的是內容區,頁面還是可以出來的。

內容區樣式:

.index-wrap{

background-color: #fff;

position: relative;

width: 100%;

height:100%;

overflow-x: hidden;

overflow-y: auto;

主要問題在height:100%

在此高度條件下,整個窗體高度100%,把頁面縮放,效果最明顯。height:100%的時候,縮放的高度是body下面顯示的頁面,超出的不顯示。

注釋掉此高度,便可以顯示整個頁面。

乙個小小的height,還有如此講究,哈哈

css關於width和height的計算方式

box sizing的允許值包括 content box 預設值 標準的盒子模型。border和padding不計算入width之內,物件的實際寬度element width width border padding。border box 怪異模式 border和padding計算入width之內。...

乙個Weex的小小小小小小頁面示例

使用weex實現的乙個頁面效果 下面列出主要的 index.vue justify content center align items center logo greeting message commontitle.vue元件 pointsmallhome.vue 頁面暫時模擬假資料 banne...

css中height 100 不起作用的解決方法

在網頁設計中,table用height 100 是可以整屏的,但需要在網頁頭部增加 後就和沒有用height 100 一樣了,後來發現要給html,body都增加height 100 的屬性,這是高度自適應問題的關鍵所在。如下 乙個物件高度是否可以使用百分比顯示,取決於物件的父級物件,table在b...