如何實現內滾動布局

2022-10-10 10:42:08 字數 944 閱讀 7683

既然是內滾動,就有必要乾掉瀏覽器原生的滾動條,這個很簡單:

html 

html主結構示意如下:

body

--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建立具有一定功能的布局。然後是現在大多數人都在使用的浮動布局。我們可以使用任何我們想用的元素,但浮動並不適用於初學者。表面上它看起來很基礎,但背後複雜的功能可以使經驗豐富的開發者看著自己的螢幕不知所措。另外,...