css 父div高度为100px。里面有两个垂直的子div，下面子div的高为40px，上面的填满剩余部分

Posted 2023-03-29

css 总高度100%。里面有两个垂直的div。上面的高度自适应。下面的40px。
如题，里面的两个div，不能有重叠部分。用css，这个改怎样写呢？感谢
展开
我来答

1条回答

fengs7476
LV.8 2018-04-13
<div class="outer">
<div class="A"> 头部DIV </div>
<div class="B">下部DIV </div>
</div>
html,body height: 100%; padding: 0; margin: 0;
.outer height: 100%; padding: 100px 0 0; box-sizing: border-box ; position: relative;
.A height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; .B height: 40px background: #D9C666; 参考技术A <style>
.div display:flex; flex-direction:column; width:300px; height:100px; border:1px solid #ccc
.div1 flex:1 1 auto; background-color:red
.div2 flex:0 0 40px; background-color:green
</style>
<div class="div">
<div class="div1">div1</div>
<div class="div2">div2</div>
</div>

参考技术B <div class='box'>