Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Positioning Schemes Absolute Positioning

Posted by john larson
john larson
16,594 Points

popup doesn't fill the height of the page

this is a simple popup modal kind of thing for a practice project. It works fine except the height doesn't fill the full page if the page is scrolled down. don't understand why.

html...
<div id="hair-modal">
  <p class="close-button">close X</p>
  <h1>This is the Hair Menu</h1>
  <ul>
    <li>Braids: $300.00</li>
    <li>Cut: $50.00</li>
    <li>Color: $75.00</li>
  </ul>

</div>
css...
#hair-modal {
  position:absolute;
  top:0;
  left: 0;
  display: none;
  text-align: center;
  width: 100%;
  height: 100%;
  background: #963;
  opacity: 0.9;
}
js...
 $("#hair-menu").click(function(){
    $("#hair-modal").fadeIn(500).show(500)
  });
  $("#hair-modal").click(function(){
    $(this).fadeOut(500).hide(500)
  });

3 Answers

Bryce Santos
Bryce Santos
11,157 Points
Bryce Santos
Bryce Santos
11,157 Points

Try setting the positioning to absolute so it's relative to the viewport.

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

As I understand it, fixed is relative to the view-port so I tried that and it worked. Is that what you meant? Cause otherwise I'm not sure how to make the view-port relative and the element absolute. Thank you so much Bryce!

Bryce Santos
Bryce Santos
11,157 Points
Bryce Santos
Bryce Santos
11,157 Points

Oops (facepalm) YES! Fixed, not absolute.