Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts

    Forcing full page height

    Hi, I'm currently converting a theme over to tumblr, but am having a problem ensuring the page height on permalink pages.

    The permalink page height is set to 100%, but you can see from this example that if the 'content' area or post is short, the page isn't long enough for the links in the sidebar and they spill out into the background.

    http://test71068.tumblr.com/post/24546451024/text

    I can kind of fix it by changing the height from 100% to 1080px, but is this the correct way to fix the issue?

    Thanks in advance.

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    The height of the <html> and <body> is by default what is needed to contain all elements and no more.
    To make your page expand to the entire viewport.
    Code:
    html, body {height:100%}

  • Users who have thanked Lerura for this post:

    OurJud (06-07-2012)

  • #3
    New Coder
    Join Date
    May 2012
    Location
    Colorado SPrings
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Another thing you can do is make it a min-height. This will make the page always the height you put so it can cover the navigation on the left but it will also expand when you add more content to the main content area.

    It Would look like this
    Code:
    <style type="text/css">
    content(or whatever your div is for the content/nav area){
    min-height:500px;
    }
    Alternativly, you could also seperate the nav from the content area and make it 2 seperate div areas. That way you can make the navigation background color and then have the main content areas background color and they wont conflict with different heights.

    If you need more help just let me know. Hope this helped you out.

  • Users who have thanked Scott R for this post:

    OurJud (06-07-2012)

  • #4
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks very much to you both. I'll have a look at both these solutions. If I don't return it can be presumed I found a satisfactory resolve.

    Thanks again

    [Update]

    Well I thought setting the html/body to 100% had fixed it, until I checked this page. If you scroll down you will see that the image spills out of the content area.

    http://test71068.tumblr.com/post/24547664363

    There's also something going very wrong on this page too: http://test71068.tumblr.com/post/24610659141

    My html/css knowledge is fairly limited, so I'm not really sure what's causing this.

    [Update 2]

    I've now established that adding 100% to the 'html' as well as 'body' causes the above problems, but if I remove it so that only 'body' has 100% defined, I'm back to where I was.
    Last edited by OurJud; 06-07-2012 at 06:40 PM.

  • #5
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Please forgive me bumping this, but I fear it might get missed due to my original comment in the last post. I've since edited the last post when I discovered the suggested solutions didn't work.

    I appreciate I should have tried the suggestions before I posted my reply.
    Last edited by OurJud; 06-07-2012 at 07:35 PM.

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    You've got to use min-height on html and body, not height. height will make it 100% all the time.

  • #7
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Apostropartheid View Post
    You've got to use min-height on html and body, not height. height will make it 100% all the time.
    That still hasn't worked, as you can see from this page: http://test71068.tumblr.com/disclaimer

    I'm looking for 100% page height regardless of the page's content.

    I don't understand why adding a 100% height property to the html and body means that the background won't stretch with the main content area: http://test71068.tumblr.com/

    It's the same on the permalink pages too: http://test71068.tumblr.com/post/24547696779 (scroll down)

    If the post has notes it's even worse: http://test71068.tumblr.com/post/246...otes-container

    I just want the main body to be fixed to full page height at all times.
    Last edited by OurJud; 06-07-2012 at 08:39 PM.

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Sorry, I hadn't read the entire thread.

    http://peterned.home.xs4all.nl/examples/csslayout1.html Examine the CSS on this page and implement it, it should be just what you need.

  • #9
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Thanks, Apostropartheid, but incorporating that into my template is a little beyond my capabilities.

  • #10
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    946
    Thanks
    0
    Thanked 129 Times in 128 Posts
    the CSS for you pages is:
    Code:
         body {
          height: 100% !important;      
          background-color: #333;      
          font: normal 11px "Arial", Helvetica, Arial, sans-serif;
          color: #333333;
          margin: 0;
          padding: 0 0 0;
        }
    The !important rule does not enforce a height of 100%.
    It ensures that it overrides other settings of the same property elsewhere,if any.

    If you haven't defined a height for the body elsewhere, then !important have absolutely no effect.

    and you have only defined a height for the body , but not for the html

    Change the above to:
    Code:
    html, body {
    height: 100%;
    }
         body {
       
          background-color: #333;      
          font: normal 11px "Arial", Helvetica, Arial, sans-serif;
          color: #333333;
          margin: 0;
          padding: 0 0 0;
        }
    Last edited by Lerura; 06-07-2012 at 10:43 PM.

  • Users who have thanked Lerura for this post:

    OurJud (06-07-2012)

  • #11
    Regular Coder
    Join Date
    Feb 2010
    Posts
    224
    Thanks
    25
    Thanked 0 Times in 0 Posts
    Lerura, I cannot thank you enough!!

    I was beginning to think I would never get that blog how I wanted, and I felt no one was understanding my insane ramblings.

    The change to the html, body, and the way you separated them into their own styling elements has done the trick!!

    I've checked all the different areas of the site and they seem to be behaving how I want so far.

    Thank you, thank you, thank you!!


  •  

    Tags for this Thread

    Posting Permissions

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