為什么紅色部分不只占可用高度的 100%

Question

為什么紅色部分不只占可用高度的 100% 我的意思是為什么紅色部分占 100vh 的 100% 而不是 100vh - 10px - 40px（黑色和藍色高度）

 .black { height: 10px; background-color: black; }.red { height: 100%; background-color: red; }.blue { height: 40px; background-color: blue; } body { height: 100vh; margin: 0; padding: 0; }

 <body> <div class="black"></div> <div class="red"></div> <div class="blue"></div> </body>

Answer 1

100% 不會為您計算剩余的可用部分。 您可以使用 ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 的calc() function 。

.red {
  height: calc(100% - 10px - 40px);
  background-color: red;
}

Answer 2

CSS 中的百分比是相對於另一個值的。 在這種情況下，您的百分比是相對於父級的height屬性的。

由於紅色元素是父元素高度的 100%，而父元素的height是100vh ，所以紅色元素的高度也將是100vh 。

要自動重新分配剩余空間，您可以使用Flexbox或CSS Grid ：

 /* Flexbox */ #flexbox { display: flex; flex-direction: column; } #flexbox.red {flex-grow: 1} /* CSS Grid */ #grid { display: grid; grid-template-rows: auto 1fr auto; } /* Presentational styling */ #flexbox, #grid { border: 1px solid black; height: 200px; }.black { height: 10px; background-color: black; }.red {background-color: red}.blue { height: 40px; background-color: blue; }

 <section> <header>Flexbox</header> <div id="flexbox"> <div class="black"></div> <div class="red"></div> <div class="blue"></div> </div> </section> <section> <header>CSS Grid</header> <div id="grid"> <div class="black"></div> <div class="red"></div> <div class="blue"></div> </div> </section>

或者，您可以使用calc()自己計算剩余空間，使用幻數或使用自定義屬性：

 /* calc() */ #calc { --h-black: 10px; --h-blue: 40px; } #calc.red { height: calc(100% - var(--h-black) - var(--h-blue)); } /* Presentational styling */ #calc { border: 1px solid black; height: 200px; }.black { height: var(--h-black); background-color: black; }.red {background-color: red}.blue { height: var(--h-blue); background-color: blue; }

 <div id="calc"> <div class="black"></div> <div class="red"></div> <div class="blue"></div> </div>

為什么紅色部分不只占可用高度的 100%

問題描述

2 個解決方案

解決方案1
0 2022-07-24 16:44:40

解決方案2
0 2022-07-24 17:00:50

為什么紅色部分不只占可用高度的 100%

問題描述

2 個解決方案

解決方案1 0 2022-07-24 16:44:40

解決方案2 0 2022-07-24 17:00:50

解決方案1
0 2022-07-24 16:44:40

解決方案2
0 2022-07-24 17:00:50