css - div 中的 div 的高度与父级不同。为什么？

Question

我有一个带有 class=main-content 的 div，它的高度为 100%。我创建了一个弹出窗体，它在单击链接时弹出。理想情况下，此表单位于构成整个页面的 div 中。这样我就可以让这个 div 有一个灰色的背景颜色，所以它给用户一个外观，他不能在表单外点击。

但是弹出窗口的高度与父窗口的高度不同，即使我将高度设置为 100%。为什么是这样？我认为高度应该以包含 block 的百分比为单位。因此它不应该和 parent 一样高吗？

请看下面的代码和截图。我正在使用 Bootstrap ，所以这可能是一个因素，尽管根据我的屏幕截图，似乎没有任何东西覆盖我的高度参数。

编辑:我应该提到我正在使用允许嵌套 CSS 的 SCSS。

这表明主要内容的高度设置为 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。