解決列高度自適應 列高度相同 的五種方法

2021-04-17 06:55:07 字數 937 閱讀 5577

2.採用指令碼控制列的高度(一)

需要事先知道哪列的高度,以此為基準用指令碼控制。

document.getelementbyid("sideleft").style.height=document.getelementbyid("sideright").scrollheight "px"

上面的**是以sideright的基準高度來控制sideleft的高度。

**簡單,但比較被動:

3.採用指令碼控制列的高度(二)

不需要事先知道哪列的高度,指令碼自動判斷。

**較複雜,有點延時:

4.採用負的外邊界和內補丁相結合

不需要事先知道哪列的高度。

hacks比較多(主要是opera的),但容易使用,推薦:

5.採用負的左右邊界和相對定位

下面的例子能較好地解決列高度相同的問題。

三行二列布局,主要內容在左邊,網頁寬度750px,左列580px,右列170px。

css**:

以下是引用片段:

#middle

#sideleft

#sideright

xhtml**:

以下是引用片段:

從結構看,middle(使用的是左列希望的背景色)在最外面,寬度等於sideleft的寬度,往裡一層是sideright,其寬度為170px,浮動方向是右邊。但其右面的邊界是負的170px,相當於將sideright拉向右面(右面緊貼著middle的右邊)170px的位置。而sideleft又是套在sideright裡面的,其內容先於sideright出來,左邊界是負的580,相當於在sideright左邊580px,此時sideleft和middle位置重合。

缺點:現在的**只能左對齊。

演示:

CSS教程 解決列高度自適應的五種方法

1.背景圖填充 這是使用最廣泛的一種做法,無hacks,推薦使用 target blank xhtml 1.0 strict en target blank rel external target blank rel external 預設長度 加長頁面 要從固定的 基於畫素的設計方法轉到彈性的 相...

iframe高度自適應解決方式

帶邊框的iframe因為能和網頁無縫的結合從而不重新整理頁面的情況下更新頁面的部分資料成為可能,可是 iframe的大小卻不像層那樣可以 伸縮自如 所以帶來了使用上的麻煩,給iframe設定高度的時候多了也不好,少了更是不行,現在,讓我來告訴大 家幾種iframe動態調整高度的方法。1 2 在ie6...

解決iframe高度自適應問題

最近工作中使用了讓人頭疼的iframe,碰到的最大問題是沒有好的方法使其高度自適應。尤其在頁面進行ajax後,後來google一番之後,發現iframe resizer能夠比較好的解決這個問題,而且還支援跨域訪問 使用postmessage 使用方法 在iframe resizer壓縮包的js資料夾...