0

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

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

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

编辑：我应该提到我正在使用允许嵌套 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;

     }
}
4

2 回答 2

1

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

于 2013-04-14T02:32:02.487 回答
0

您的 CSS 格式不正确。将#modalpopout CSS 移到#overlay的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;

     }

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

于 2013-04-14T02:19:15.403 回答