国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS之div嵌套問題及高度自適應問題的五種實現--個人總結

Jaden / 2948人閱讀

摘要:以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。

以下是在自己實習生面試的時候遇到的一個問題,事后自己也去總結了一下。
問題描述如下:
一個外層div里面嵌套兩個內部div,外層div高度固定(假設未知),內層上面的div高度固定,如何讓下面的div實現撐滿外層的div高度?
看到過網上有類似的問題,但是大部分都是假設外層高度為100%或者是已知的,而我遇到的是外層高度雖然固定,但是我們并不知道是多少(這里需要說明一下,代碼中外層的高度我雖然自己給了固定值,但是只是為了效果,后面其實都沒有用到這個值,基本就滿足我們不知道外層的具體高度是多少這個條件了),所以也參看了網上的一些零散的解法,自己也都去實踐了一下,最后總結出五種可以實現的方法。
HTML代碼如下:

888888888
12321423512

五種實現方法如下:
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

相關文章

  • 面試題CSS盒子模型,左右固定寬度,中間適應五種死法

    摘要:優點相比之前布局更具有靈活性缺點脫離文檔流,下面的元素都受影響。 面試題目 假設高度已知,請寫出三欄布局,左右300px,中間自適應 showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢? 最容易的應該想到利用float來寫,代碼如下 css樣式代碼,以下五種都是用一個樣式代碼 ...

    leanxi 評論0 收藏0
  • 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間適應五種方法

    摘要:假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應的五種方法頁面布局題目假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間自適應的五種方法 HTML CSS 頁面布局 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px...

    alaege 評論0 收藏0
  • 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間適應五種方法

    摘要:假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應的五種方法頁面布局題目假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間自適應的五種方法 HTML CSS 頁面布局 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px...

    Shihira 評論0 收藏0

發表評論

0條評論

Jaden

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<