Div 对高度没有反应答案

【问题标题】：Div not responding to heightDiv 对高度没有反应
【发布时间】：2021-08-07 05:58:13
【问题描述】：

我的全部内容都包含在一个 Div 中，但由于某种原因，我的 #main-content 没有响应我设置的任何高度。在这种情况下，我希望我的#main-content 为 100vh

HTML

<div id="main-content">
    <div id="overlay"></div>

    <header id="main-header">
        <div class="slider-container">

           /* MORE CODE HERE */

        </div>
    </header>
   
    <div id="content-bottom">

       /* MORE CODE HERE */
    </div>
</div>

CSS

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
position: relative;
scroll-behavior: smooth;
}
body {
font-family: 'Spartan', sans-serif;
font-size: 12px;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
display: none;
}
#main-content {
width: 100%;
height: 100vh;
overflow: hidden;
}

【问题讨论】：

专业提示：您可以使用语言标识符来突出显示您的 css 代码

标签： html css height viewport

【解决方案1】：

#main-content 似乎不会响应高度调整，而它的一个孩子的高度设置为100vh。尝试更改#overlay 的高度以用height: 100% 填充#main-content 的高度。

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 997;
  display: none;
}

【讨论】：

【解决方案2】：

您的代码运行正常#main-content 为 100vh 高。尝试运行 sn-p。

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
position: relative;
scroll-behavior: smooth;
}
body {
font-family: 'Spartan', sans-serif;
font-size: 12px;
}
#overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: 997;
display: none;
}
#main-content {
background:yellow;
width: 100%;
height: 100vh;
overflow: hidden;
}

<div id="main-content">
    <div id="overlay"></div>

    <header id="main-header">
        <div class="slider-container">

           /* MORE CODE HERE */

        </div>
    </header>
   
    <div id="content-bottom">

       /* MORE CODE HERE */
    </div>
</div>

【讨论】：