gpt4 book ai didi

html - 高度 100% 和最小高度 100%

转载 作者:太空宇宙 更新时间:2023-11-04 12:12:38 26 4
gpt4 key购买 nike

我需要第三个和第四个矩形具有相同的位置,但填充了 % 中剩余的所有高度,我不能更改 min-height:100% body, html。使用 css、html 和下面的代码。

  html, body{ min-height: 100%; }	
* { margin: 0;}

div>div {
float: left;
width: 50%;
}
.rectangle-one{
height: 100px;
background-color: red;
}
.rectangle-two{
height: 100px;
background-color: black;
}
.rectangle-third{
height: 150px;
background-color: green;
}
.rectangle-fourth{
height: 150px;
background-color: yellow;
}
<!doctype html>

<html>

<body>
<div >
<div class="rectangle-one"></div>
<div class="rectangle-two"></div>
</div>

<div >
<div class="rectangle-third"></div>
<div class="rectangle-fourth"></div>
</div>
</body>

</html>

最佳答案

只需将第二行列包裹在具有计算高度的父项中即可完成工作。

html,
body {
min-height: 100%;
}
* {
margin: 0;
}
div>div {
float: left;
width: 50%;
}
.row-first {
overflow: hidden;
height: 100px;
}
.row-second {
position: absolute;
top: 100px;
bottom: 0;
height: calc(100% - 100px);
width: 100%;
}
.rectangle-one {
height: 100px;
background-color: red;
}
.rectangle-two {
height: 100px;
background-color: black;
}
.rectangle-third {
background-color: green;
height: 100%;
}
.rectangle-fourth {
background-color: yellow;
height: 100%;
}
<!doctype html>

<html>

<body>
<div class="row-first">
<div class="rectangle-one"></div>
<div class="rectangle-two"></div>
</div>

<div class="row-second">
<div class="rectangle-third"></div>
<div class="rectangle-fourth"></div>
</div>
</body>

</html>

关于html - 高度 100% 和最小高度 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28932974/

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