SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using height:102%; margin-bottom:1px; to stop shifting causes new problems

    Hi, I used a CSS trick to stop my page from shifting.

    Code:
    html {
    	height:102%;
            margin-bottom:1px;
    }
    The only problem is that now I have a constant vertical scroll bar. See my test site here: http://saraholt.com/dg/index.php It also happens on the Performing Live page.

    If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.

    Any ideas on how to fix these issues without causing more problems?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi sparkler. Welcome to the forums.

    Quote Originally Posted by sparkler View Post
    If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.
    That's standard browser behavior, so I wouldn't worry about it. But if you really want to do this, try the 100% tall page method detailed here:

    http://www.sitepoint.com/forums/show...41#post1243541

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The only problem is that now I have a constant vertical scroll bar...

    If I remove that code or change the height to 100%, my whole layout starts to shift slightly on some longer pages if the window is made smaller than the width of the main div.
    Keeping the scrollbox present at all times is the only way to keep the page from shifting. The page shifts when the scrollbox is introduced on long pages or a browser resize event that causes content to exceed 100% height.

    Any ideas on how to fix these issues without causing more problems?
    The cleanest way to do this is to just set the html as overflow-y:scroll
    Then if the content exceeds 100% height the scroller will appear in the already present scrollbox.

    Code:
    html {
        height:100%;
        overflow-y:scroll; /*keep scrollbox present at all times*/
    }

  4. #4
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Rayzur, that seems to have worked! Thank you!

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Glad you found it helpful.


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
  •