div 내 div의 높이가 상위와 다릅니다. 왜?

Question

나는 class=main-content 인 div가 있는데 높이는 100 %입니다. 링크를 클릭하면 튀어 나오는 팝업 양식을 만들었습니다. 이상적으로이 양식은 전체 페이지를 구성하는 div에 있습니다. 그런 식으로이 div에 배경색이 회색으로 표시되어 양식 외부를 클릭 할 수 없도록 사용자에게 모양을 제공합니다.

그러나 높이를 100 %로 설정해도 팝업의 높이가 부모와 다릅니다. 왜 이런거야? 난 높이가 포함 된 블록의 %로 있어야한다고 생각. 따라서 부모와 같은 높이가되어서는 안됩니까?

아래 코드 및 스크린 샷을 참조하십시오. 부트 스트랩을 사용하고 있기 때문에 요인이 될 수 있습니다. 물론 내 스크린 샷에 따르면 높이 매개 변수를 재정의하는 것이 나타나지 않습니다.

편집 : CSS의 중첩을 허용하는 SCSS를 사용하고 있음을 언급해야합니다.

주 콘텐츠의 높이가 100 %로 설정되어 있고 실제로 전체 화면임을 나타냅니다.

오버레이 팝업 높이가 100 %로 설정되어 있지만 전체 화면이 아닙니다. 왜?

.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가 잘못되었습니다

<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 :

은 여기 내 HTML 내 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를 구성하는 적절한 방법입니다.