格內div有不同於父母的高度。爲什麼？

我有一個class=main-content的div，它的高度爲100％。我創建了一個彈出窗體，當點擊鏈接時彈出窗體。理想情況下，此表單位於構成整個頁面的div中。這樣我就可以讓這個div具有灰色的背景顏色，所以它給了用戶的外觀，他不能在窗體之外單擊。格內div有不同於父母的高度。爲什麼？

但是，彈出窗口與父窗口的高度不同，即使我將高度設置爲100％。爲什麼是這樣？我認爲高度應該在包含塊的百分比中。因此，它不應該和父母一樣高嗎？

請參閱下面的代碼和屏幕截圖。我使用引導程序，這可能是一個因素，但根據我的屏幕截圖，它不會出現任何重寫我的高度參數。

編輯：我應該提到，我正在使用允許嵌套CSS的SCSS。

這表明主要內容的高度設置爲100％，並且確實是全屏。 Main Content

這表明疊加彈出窗口的高度設置爲100％，但它不是全屏。爲什麼？ Overlay modal

這是我的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; 

    } 
}

來源

2013-04-14 Terence Chow

嘗試將position: relative;添加到.main-content。

來源

2013-04-14 02:32:02

TY先生。在閱讀了一些文檔後，我發現它是最初的包含塊。我犯了一個錯誤，認爲最初的包含塊是父項。對於閱讀這個答案的任何人，當你有'位置：絕對'時，高度是相對於最接近的父母，其位置是絕對的，相對的或固定的。如果沒有，那就是父母。這裏是一個鏈接更多的信息，並得到更具體的：http://www.w3.org/TR/CSS21/visudet.html#containing-block-details –

正是:)我只是閱讀文檔有關絕對定位http：///www.w3.org/TR/CSS21/visuren.html#comp-abspos –

你的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-14 02:19:15 Scott

對不起，我應該提到，我使用的是允許嵌套CSS的Scss。將它移出不會有任何影響。 –

格內div有不同於父母的高度。爲什麼？

回答

相關問題