div中的div具有与父级不同的高度。为什么？

Question

我有一个class=main-content的div，其高度为100％。我创建了一个弹出窗体，在单击链接时会弹出。理想情况下，此表单位于构成整个页面的div中。这样我可以使这个div具有灰色的背景颜色，因此它为用户提供了外观，他无法在表单外单击。

然而，即使我将高度设置为100％，弹出窗口的高度也不同于父级。为什么是这样？我认为高度应该是包含块的％。因此它不应该与父母一样高吗？

请参阅下面的代码和截图。我正在使用bootstrap，这可能是一个因素，虽然根据我的截图，似乎没有任何东西覆盖我的高度参数。

编辑：我应该提一下，我正在使用SCSS，它允许嵌套CSS。

这表示主要内容的高度设置为100％，并且它确实是全屏。

这表示叠加弹出窗口的高度设置为100％，但不是全屏。为什么？

这是我的HTML和我的CSS：

<div class="main-content">
    <!--...the page without the modal goes here -->

   <!--modal starts --> 
    <div id='overlay'>
        <div id = 'modalpopout'>

        </div>
    </div>
   <!--modal ends-->
</div>

CSS

.main-content{
height:100%;
padding:50px 0 40px 0;
}


#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 text-align:center;
 z-index: 1000;
 background-color:rgba(105,105,105,0.8);
 #modalpopout {
     width:500px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;

     }
}

Answer 1

尝试将position: relative;添加到.main-content。

Answer 2

你的CSS格式不正确。将#modalpopout CSS 移到外面的#overlay。

.main-content{
height:100%;
padding:50px 0 40px 0;
}


#overlay {
 visibility: hidden;
 position: absolute;
 left: 0px;
 top: 0px;
 width:100%;
 height:100%; 
 text-align:center;
 z-index: 1000;
 background-color:rgba(105,105,105,0.8);

}


 #modalpopout {
     width:500px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:center;

     }

我不能说这是否能解决您的具体问题，但这是配置CSS的正确方法。