Div 沒有延伸到父級的 100% 高度

Question

我正在設計我的 CSS 布局，但無法讓 div 拉伸到父級高度的 100%。

我有一個菜單欄，占據屏幕頂部 13.714vh。 然后我有一個主 div，我想占據我對 height: 100% 所做的屏幕高度的剩余部分。 底部容器占據了主可用垂直空間的底部 38.2%，我希望語音氣泡占據主中剩余的垂直空間的 61.8%。

但是出於某種原因，屏幕中間有一個巨大的白色容器，因此語音氣泡並沒有占用剩余的空間。 誰能幫我弄清楚發生了什么？

我的 HTML 有問題還是我在 CSS 中犯了錯誤？

這是代碼筆： https : //codepen.io/TheNomadicAspie/pen/NWjKwxE

 body { margin: 0; } .menu-bar { height: 13.714vh; width: 100vw; background: darkblue; top: 0%; } .main { background: black; grid-template-rows: 61.8% 100%; height: 100%; width: 100%; padding-left: 1.5%; padding-right: 1.5%; padding-top: 1.5%; padding-right: 1.5%; } .speech-bubble { grid-row: 1; position: relative; background: orange; height: 97%; width: 97%; border-radius: 4em; } .speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 4em solid transparent; border-top-color: white; border-bottom: 0; margin-left: -4em; margin-bottom: -4em; } .email-container { visibility: hidden; } .question-text { visibility: hidden; } .bottom-container { grid-row: 2; position: fixed; background: green; height: 38.2%; width: 100vw; bottom: 0%; left: 0%; }

 <div id="menu_bar" , class="menu-bar"></div> <div id="main" , class="main"> <div id="speech_bubble" , class="speech-bubble"> <div id="email_container" class="email-container"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> <button id="submit_email_btn" class="btn">Submit</button> </div> <div id="question_text" class="question-text">Question</div> </div> </div> <div id="bottom_container" , class="bottom-container"> </div> </div> </div>

Answer 1

你想要這樣的東西嗎？ 截圖。

如果是這樣，將您的.menu-bar設為position: relative並按如下方式修改您的.main類樣式將起作用：

.main {
    position: absolute;
    background: black;
    left: 0;
    right: 0;
    height: 50%;
}

此外，您可以在語音氣泡類中添加margin: auto以將其對齊到中心。

Answer 2

你的主標簽沒有全高，因為你的 html 和 body 標簽沒有全高。 永遠記住，塊元素可以最大程度地拉伸到其父元素的高度，因此您需要將 html 和 body 標簽高度設置為 100%。 我在下面添加了額外的 css。

html, body { height: 100%;}

Answer 3

我想你想要這樣的東西

      * {
      margin: 0;
      box-sizing: border-box;
      }
      body {
      display: flex;
      flex-direction: column;
      height: 100vh;
      }
      .menu-bar {
      height: 13.714vh;
      background-color: tomato;
      color: #fff
      }
      .main {
      background: black;
      padding: 1.5%;
      flex: 1
      }
      .speech-bubble {
      background-color: orange;
      border-radius: 4em;
      height: 95%;
      position: relative;
      display: flex;
      flex-direction: column;
      }
      .speech-bubble:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border: 4em solid transparent;
      border-top-color: white;
      border-bottom: 0;
      margin-left: -4em;
      margin-bottom: -4em;
      }
      .email-container {
      align-items: center;
      justify-content: center;
      flex: 1;
      display: flex;
      }
      .question-text {
      height: 50px;
      position: relative;
      text-align: center
      }
      .bottom-container {
      height: 70px;
      background-color: lightseagreen;
      }