CSS高度自適應

來源:互聯網
上載者:User

網上有相關的文章,但是都沒有說思想。之前只是有這個認識,但是沒有親自寫過類似的東西,這回做了一個這樣類似的東西。發現一個道理就是:只看不做,終無成也。

經過自己的嘗試,發現需要兩個前提:

1、高度自適應的這個元素,假設為A,它必須要有一個或多個它的兄弟元素(節點),假設為B;

2、Height(B) > Height(A)。

如果不符合上面的條件的話就沒必要做自適應了。

需要做的有兩點:

1、對A的父級元素(節點),假設為C,設定:overflow-y: hidden; //隱藏掉有可能超出的部分

2、對A元素設定:margin-bottom: -2000px; padding-bottom: 2000px; //可以看出按照盒模式的計算方式,就剛好相互抵消了。

這樣就可以看出效果了。

不過我發現了一個問題:

1、IE6下,我採用的是margin-left:-100%進行布局,發現使用這個屬性後,定位錯誤,跑出了螢幕。修正為:_margin-left: -xxxpx; //xxx為主內容的寬度

具體的參考:http://www.positioniseverything.net/articles/onetruelayout/equalheight 或google:css自適應高度

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。