标签:cal ack flex border rect bottom body family class
Problem:父元素内包含两个子元素,一个定高,另一个高度自适应
Ans:
<div class="box">
<div class="ele1"></div>
<div class="ele2"></div>
</div>
(1)
.box {
width:200px;
height:300px;
background:red;
display:flex;
flex-direction:column;
}
.ele1 {
height:100px;
background:green;
}
.ele2 {
background:blue;
flex:1;
}
(2)
.box {
width:100px;
height:300px;
background:red;
position:relative;
}
.ele1 {
height: 100px;
background:green;
}
.ele2 {
background:blue;
width:100px;
position:absolute;
top:100px;
bottom:0;
}
(3)
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.box {
height: 100%;}
.ele1 {
height: 100px;
background:purple;
}
.ele2 {
height: calc(100% - 100px);
background:blue;
}
(4)
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.box {
height: 100%;
padding: 100px 0 0;
box-sizing: border-box ;
position: relative;
}
.ele1 {
height: 100px;
background: #BBE8F2;
position: absolute;
top: 0 ;
left: 0 ;
width: 100%;
}
.ele2 {
height: 100%;
background: #D9C666;
}
(5)
html, body {
height: 100%;
padding: 0;
margin: 0; }
.box {
height: 100%;
position: relative;
}
.ele1 {
height: 100px;
background:purple;
}
.ele2 {
background:blue;
width: 100%;
position: absolute;
top: 100px ;
left: 0 ;
bottom: 0;
}
参考:https://segmentfault.com/q/1010000000762512
标签:cal ack flex border rect bottom body family class
原文地址:http://www.cnblogs.com/haimengqingyuan/p/6858838.html