CODEWITHSUNDEEP
css
Terence Chow
Terence Chow

Reputation: 11173

div within a div has different height than parent. Why?

I have a div with class=main-content which has height of 100%. I created a popup form which pops out when a link is clicked. Ideally, this form is in a div which makes up the entire page. That way I can make this div have a background color of gray, so it gives the appearance for the user, that he cannot click outside the form.

However the popup has a different height than the parent even though I set the height equal to 100%. Why is this? I thought the height should be in % of the containing block. Thus shouldn't it be the same height as the parent?

Please see below code and screenshots. I am using bootstrap so that might be a factor, although according to my screenshots, it doesn't appear that anything is overriding my height parameter.

Edit: I should mention that I am using SCSS which allows nesting of CSS.

This shows the height of the main-content is set at 100% and that it is indeed the full screen. Main Content

This shows the height of the overlay popup is set to 100% but it is not the full screen. Why? Overlay modal

Here is my HTML and my 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;

     }
}

Upvotes: 0

Views: 237

Answers (2)

Miljan Puzović
Miljan Puzović

Reputation: 5820

Try to add position: relative; to .main-content.

Upvotes: 1

Scott
Scott

Reputation: 21890

Your CSS is malformed. Move the #modalpopout CSS outside the CSS for #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;

     }

I can't say if this will fix your specific issue, but this is the proper way to configure CSS.

Upvotes: 0

Related Questions