摘要:以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。
以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。
問題描述如下:
一個外層div里面嵌套兩個內部div,外層div高度固定(假設未知),內層上面的div高度固定,如何讓下面的div實現撐滿外層的div高度?
看到過網上有類似的問題,但是大部分都是假設外層高度為100%或者是已知的,而我遇到的是外層高度雖然固定,但是我們并不知道是多少(這里需要說明一下,代碼中外層的高度我雖然自己給了固定值,但是只是為了效果,后面其實都沒有用到這個值,基本就滿足我們不知道外層的具體高度是多少這個條件了),所以也參看了網上的一些零散的解法,自己也都去實踐了一下,最后總結出五種可以實現的方法。
HTML代碼如下:
88888888812321423512
五種實現方法如下:
1、使用flex布局實現
.wrapper { width: 200px; height: 400px; margin: 100px auto; /*這里的margin純屬為了測試時候的顯示效果居中,無實際用途*/ background: aquamarine; display: flex; flex-direction: column; } .div1 { height: 100px; width: 100%; background-color: violet; order: 0; } .div2 { background-color: teal; width: 100%; order: 1; flex-grow: 1; }
2、下面的div使用position:absolute + top/bottom實現
.wrapper { width: 200px; height: 400px; margin: 100px auto; background: aquamarine; position: relative; } .div1 { height: 100px; background-color: violet; } .div2 { background-color: teal; width: 100%; position: absolute; top: 100px; bottom: 0; }
3、下面的div設置margin-top為負值實現
.wrapper { width: 200px; height: 400px; margin: 100px auto; background: aquamarine; position: relative; } .div1 { height: 100px; background-color: violet; position: relative; } .div2 { background-color: teal; width: 100%; height: 100%; margin-top: -100px; box-sizing: border-box; padding-top: 100px; }
4、外層div設置padding-top,內層上面的div絕對定位實現
.wrapper { width: 200px; height: 400px; margin: 100px auto; box-sizing: border-box; padding-top: 100px; background: aquamarine; position: relative; } .div1 { height: 100px; width: 100%; background-color: violet; position: absolute; top: 0; } .div2 { background-color: teal; width: 100%; height: 100%; }
5、上面的div絕對定位,top:0;下面的div設置box-sizing + padding-top
.wrapper { width: 200px; height: 400px; margin: 100px auto; background: aquamarine; position: relative; } .div1 { height: 100px; width: 100%; background-color: violet; position: absolute; top: 0; } .div2 { background-color: teal; width: 100%; height: 100%; box-sizing: border-box; padding-top: 100px; }
第一次寫文章,有什么問題歡迎指出,大家有什么其他的實現方法也歡迎一起分享~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116691.html
摘要:優點相比之前布局更具有靈活性缺點脫離文檔流,下面的元素都受影響。 面試題目 假設高度已知,請寫出三欄布局,左右300px,中間自適應 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢? 最容易的應該想到利用float來寫,代碼如下 css樣式代碼,以下五種都是用一個樣式代碼 ...
摘要:假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應的五種方法頁面布局題目假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間自適應的五種方法 HTML CSS 頁面布局 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px...
摘要:假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應的五種方法頁面布局題目假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間自適應的五種方法 HTML CSS 頁面布局 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px...
閱讀 1123·2023-04-26 00:12
閱讀 3246·2021-11-17 09:33
閱讀 1059·2021-09-04 16:45
閱讀 1186·2021-09-02 15:40
閱讀 2144·2019-08-30 15:56
閱讀 2949·2019-08-30 15:53
閱讀 3546·2019-08-30 11:23
閱讀 1931·2019-08-29 13:54