高度 100% 带 flex-wrap
height 100% with flex-wrap
我用 Flexbox 做了布局。
当我使用flex-wrap: wrap
时,其他元素没有覆盖全高。
body {
height: 100%;
}
.wrap {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
background-color: antiquewhite;
justify-content: center;
}
.box {
margin: 10px;
width: 300px;
height: 300px;
background-color: azure;
}
.modal {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
<div class="wrap">
<div class="modal">Modal</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
我希望 .modal 覆盖 100% 的高度,但它没有。
如何使 .modal 的高度达到 100%?
谢谢。
将 position: relative
添加到 . wrap
class:
我用 Flexbox 做了布局。
当我使用flex-wrap: wrap
时,其他元素没有覆盖全高。
body {
height: 100%;
}
.wrap {
display: flex;
flex-shrink: 0;
flex-wrap: wrap;
background-color: antiquewhite;
justify-content: center;
}
.box {
margin: 10px;
width: 300px;
height: 300px;
background-color: azure;
}
.modal {
position: absolute;
background: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
}
<div class="wrap">
<div class="modal">Modal</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
我希望 .modal 覆盖 100% 的高度,但它没有。
如何使 .modal 的高度达到 100%?
谢谢。
将 position: relative
添加到 . wrap
class: