資訊專欄INFORMATION COLUMN
摘要：以下是在自己實(shí)習(xí)生面試的時(shí)候遇到的一個(gè)問(wèn)題，事后自己也去總結(jié)了一下。
以下是在自己實(shí)習(xí)生面試的時(shí)候遇到的一個(gè)問(wèn)題，事后自己也去總結(jié)了一下。
問(wèn)題描述如下：
一個(gè)外層div里面嵌套兩個(gè)內(nèi)部div，外層div高度固定（假設(shè)未知），內(nèi)層上面的div高度固定，如何讓下面的div實(shí)現(xiàn)撐滿外層的div高度？
看到過(guò)網(wǎng)上有類似的問(wèn)題，但是大部分都是假設(shè)外層高度為100%或者是已知的，而我遇到的是外層高度雖然固定，但是我們并不知道是多少（這里需要說(shuō)明一下，代碼中外層的高度我雖然自己給了固定值，但是只是為了效果，后面其實(shí)都沒(méi)有用到這個(gè)值，基本就滿足我們不知道外層的具體高度是多少這個(gè)條件了），所以也參看了網(wǎng)上的一些零散的解法，自己也都去實(shí)踐了一下，最后總結(jié)出五種可以實(shí)現(xiàn)的方法。
HTML代碼如下：
88888888812321423512
五種實(shí)現(xiàn)方法如下：
1、使用flex布局實(shí)現(xiàn)
.wrapper {
width: 200px;
height: 400px;
margin: 100px auto; /*這里的margin純屬為了測(cè)試時(shí)候的顯示效果居中，無(wú)實(shí)際用途*/
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實(shí)現(xiàn)
.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設(shè)置margin-top為負(fù)值實(shí)現(xiàn)
.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設(shè)置padding-top，內(nèi)層上面的div絕對(duì)定位實(shí)現(xiàn)
.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絕對(duì)定位，top:0；下面的div設(shè)置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;
}
第一次寫(xiě)文章，有什么問(wèn)題歡迎指出，大家有什么其他的實(shí)現(xiàn)方法也歡迎一起分享~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116691.html
摘要：優(yōu)點(diǎn)相比之前布局更具有靈活性缺點(diǎn)脫離文檔流，下面的元素都受影響。 面試題目 假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，左右300px，中間自適應(yīng) showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢？ 最容易的應(yīng)該想到利用float來(lái)寫(xiě)，代碼如下 css樣式代碼，以下五種都是用一個(gè)樣式代碼 ...
摘要：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px...
摘要：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁(yè)面布局題目假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動(dòng)解決方案浮動(dòng)解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁(yè)面布局 題目：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px...
閱讀 1136·2023-04-26 00:12
閱讀 3282·2021-11-17 09:33
閱讀 1071·2021-09-04 16:45
閱讀 1201·2021-09-02 15:40
閱讀 2188·2019-08-30 15:56
閱讀 2975·2019-08-30 15:53
閱讀 3559·2019-08-30 11:23
閱讀 1940·2019-08-29 13:54
