使用CSS實現自適應高度和底部對齊

2022-02-01 03:57:54 字數 2368 閱讀 8728

在實際開發中,我們遇到一種情況,需要將**的底部放乙個分頁的標籤,這樣使得布局如下

實際**主體包含兩部分內容,資料和分頁資訊,分頁資訊最好總是停靠在**主體的底部,我們以前使用的是**的valign實現,但是存在不少的問題,現在我們使用css+expression實現以下功能

1、**主體的位置可以在水平和垂直的任何位置

2、**主體的高度自動擴充套件到頁面的底部

3、分頁資訊停靠在**主體的底部

現在的缺陷

1、頁的margin、padding屬性會導致定位不正確

2、需要自處理**行數,免得將分頁資訊覆蓋

3、頁面如果包含在主體以後的東西需要自己計算啦

閒話少說,帖**

>

>

aa  

bb  

cc  

cc  

cc  

cc  

cc  

cc  

>

style=

"width:100px;float:left;background-color:#ffffcc;">

傳統的東東,這裡的高度是自適應的高度,呵呵,如果需要實現底部對齊,有些費勁

>

"content">

style=

"width:100%"

border=

"1">

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

>a

>

>a

>

>a

>

>a

>

>a

>

>

>

要注意這裡**的行數啊,否則一不小心就會覆蓋下面的分頁顯示的東西,慎重啊慎重

"pageinfo">

分頁顯示

後面的東東

>

>

這行你肯定需要滾屏才看得到!!!這行導致出現滾動條!

我的blog搬家到自己的站點了

站點鏈結

rss

CSS實現div高度自適應

1 有時候,我們希望容器有乙個固定高度,但當其中的內容多的時候,又希望高度能夠自適應,也即容器在縱向能被撐開,且如果有背景,也能夠自適應。在一般情況下,使用min height即可解決。但是廣大網民的首選瀏覽器ie6並不支援min height。ie7,opera,火狐,谷歌沒有問題。所以採用以下寫...

css實現左邊高度自適應右邊高度

手可摘星辰 危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天 危樓高百尺,手可摘星辰,不敢高聲語,恐驚天上天危樓高百尺...

Iframe自適應高度和拖拽自適應

思路 1.在iframe所在的主頁面取iframe內部的高度 2.在iframe內部當初始化完之後取得自己高度並改變父iframe高度 法一 需要在iframe的平級,當頁面初始化的時候呼叫 the iframe height self adaption param the iframe id fu...