Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Positioning Schemes Absolute Positioning

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,144 Points

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

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,144 Points

Oops (facepalm) YES! Fixed, not absolute.