SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: 100% height

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height

    Can someone please have a look at this page Peter Diem. I am working, or at least I try to work with a 100% height layout with a full screen background. I am using a floater to get the content vertically centered. But as you can see on the page do I have a vertical scrollbar! I really don't see where I made the mistake.

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,363
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You set a min-height of 100% for the absolute image and a height of auto. That means when the browser is wide the height of the image will be in excess of the min-height and thus forces a scrollbar. The height of the image will be changed to maintain the aspect ratio caused by the width changes and therefore will often be greater than than the min-height:100%.

    You would have needed to set a max-height of 100% instead of a min-height if you want the image to stay in the viewport and not cause a scrollbar. Of course that wil change the aspect ratio of the image.

    Have you thought of just using a normal image on the body element and using something like background-size:cover ?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •