既然是內滾動,就有必要乾掉瀏覽器原生的滾動條,這個很簡單:
htmlbodyhtml主結構示意如下:
--page
--header
--side
--content
我們可以利用絕對定位元素的拉伸特性,使內滾動容器高度自適應匹配。
.page應該很好理解,絕對定位,滿屏拉伸,等同於:
.page對於固定的頭部由於省了好幾個位元組,所以我捨棄了ie6使用了上面寫法。
header
或者固定的側邊side
, 你可以使用語義明確的position:fixed
定位,或者直接使用position:absolute
,因為滾動容器跟他們平級,所以,absolute
其實就是fixed
效果。
講到這裡就不得不說點題外話,很多人會遇到移動端position:fixed
的底部輸入框定位的頭疼問題,如何解決?就是使用本文介紹的內滾動布局,然後底部使用position:absolute
模擬fixed
效果。
**方面,同樣就是拉伸拉伸:
.header
.side
最後就是高能的content
, 還是一樣的套路:
.content
主體內容全部都在content
裡面玩耍。於是,乙個高寬均自適應瀏覽器窗體的內滾動布局就成型了。
參考:
flex布局實現無縫滾動
案例的演示 flex布局 所謂flex布局就是彈性盒布局,這種布局在移動端比較常用,但隨著瀏覽器的版本更新,flex布局因為自身的優點,日漸常用。思路 首先分析這個小demo的結構,上下結構,我們可以用乙個容器,將其包裹 就是所謂的大盒子 上方是個導航,上邊是個ul,下面我們就可以用兩個div,寬度...
滾動廣告 CSS布局
研究了一下css布局以及css固定視窗,在此基礎上設計了滾動廣告。先附上 使用jquery 1.7 min html head title css布局及滾動廣告 title style my windows container header content content left content ...
CSS 彈性布局如何實現
背景 首先,我們有 布局。當不考慮語義並且利用一些適當的巢狀和其他技巧,我們可以用table建立具有一定功能的布局。然後是現在大多數人都在使用的浮動布局。我們可以使用任何我們想用的元素,但浮動並不適用於初學者。表面上它看起來很基礎,但背後複雜的功能可以使經驗豐富的開發者看著自己的螢幕不知所措。另外,...