gpt4 book ai didi

css - 第二个 div 的填充高度为页面的 100%(纯 css)

转载 作者:行者123 更新时间:2023-12-02 15:23:11 24 4
gpt4 key购买 nike

是否有可能使用最新的 CSS 来获得灵活的高度 div (a) 和 div (b) 以填充页面?

行中的内容:

div.a { height: calc(100% - div.a.height); }

body {
background-color: #FEFEFE;
}
div {
padding: 20px;
margin: 10px;
border: 4px solid black;
width: 100px
}
div.a {
background-color: #278dae;
}
div.b {
background-color: #409b24;
/*height: calc(100% - div.a.height); <-- this */
}
<body>
<div class="a">a</div>
<div class="b">b</div>
</body>

visual example

最佳答案

Flexbox 可以做到这一点:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background-color: #FEFEFE;
display: flex;
flex-direction: column;
}
div {
padding: 20px;
margin: 10px;
border: 4px solid black;
width: 100px
}
div.a {
background-color: #278dae;
}
div.b {
flex: 1;
background-color: #409b24;
}
<body>
<div class="a">a</div>
<div class="b">b</div>
</body>

关于css - 第二个 div 的填充高度为页面的 100%(纯 css),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33547493/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com