我有兩個<div>元素，父母和孩子；我需要讓孩子填滿父母的所有可用高度。
不過，出于某種原因，我在底部有這個填充；我只能通過105%為孩子設定高度來洗掉它。
這顯然不是最好的解決方案。我嘗試使用align-items: stretch，但它沒有做任何事情。
如果有人知道如何解決這個問題，我將不勝感激。
<div style="width: 100%;
height: 92%;
display: flex;
flex-direction: row;
box-sizing: content-box;
">
<div style="height: '100%';
backgroundColor:'red';
">
</div>
</div>
uj5u.com熱心網友回復：
flex-basis: 100%;在彈性專案上使用。
html,
body {
margin: 0;
height: 100%;
}
body>div:first-child {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
box-sizing: content-box;
}
div>div {
flex-basis: 100%;
background-color: red;
}<div>
<div>foo</div>
</div>您可以從下面的第二個示例中看到，盡管具有靜態或動態大小的父級，它仍然有效。
body>div:first-child {
width: 800px;
height: 400px;
display: flex;
flex-direction: row;
box-sizing: content-box;
}
div>div {
flex-basis: 100%;
background-color: red;
}<div>
<div>foo</div>
</div>uj5u.com熱心網友回復：
父容器的寬度或高度需要是特定的/絕對的。因此，與其將父級的高度設定為 92%，不如嘗試 92vh。
<div
style={{
width: 100%;
height: 92vh;
display: flex;
flex-direction: row;
box-sizing: content-box;
}}
>
<div
style={{
height: '100%',
backgroundColor:'red',
}}
>
abc
</div>
</div>uj5u.com熱心網友回復：
這里已經列出了一些基礎知識。為了便于閱讀，我也對其進行了一些重新格式化。你有背景顏色作為背景顏色，以及 100% 到 '100%'。
如果以此為基礎，只要把它的寬高改為100%，應該沒有問題。更大的變化是設定位置，并確保您設定了高度和寬度。
<body style="position: absolute; padding: 0; margin: 0; width: 100vw; height: 100vh; background-color: aquamarine; display: flex; justify-content: center;">
<div style="
position: relative;
width: 70%;
height: 70%;
align-self: center;
box-sizing: content-box;
border: 2px solid grey;
background-color: aliceblue;
display: flex;
justify-content: center;">
<div style = "
position:relative;
align-self: center;
height: 80%;
width: 80%;
background-color: red;">
</div>
</div>
</body>
我還在正文中添加了一些樣式，以幫助了解正在發生的事情。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459632.html
上一篇：為什么我的表頭沒有留在原位