SitePoint Sponsor

User Tag List

Results 1 to 23 of 23
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Body height dependend screen resolution

    Hello,

    Is it possible to make the body 'HEIGHT' dependend of the screen resolution?
    (I mean with height, the browser viewport which is (screen height - navigation bar height - webdeveloper toolbar - tab bar))

    It is on this moment not clear to me what the difference is between:
    - window.innerHeight,
    - document.documentElement.clientHeight,
    - document.body.clientHeight
    (But I will find out.)

    Example:
    Navigation bar height = 20px
    web developer toolbar = 15px
    tab bar = 20 px;
    Screen resolution = 1024 px.

    Then I should like that the body height will be:
    Body height = 1024 - 20 - 15 -20 = 969px

    And if the screen resolution is 900 px
    Body height = 900 - 20 - 15 -20 = 845px

    Is that possible with CSS. Or is this possible in combination with javascript? Or is that the wrong road?

    I want to realize that because I should like that my 'full' website is on the screen and make the content part lower or higher with overflow: auto;

    Thanks in advance,

    Nico

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can give an element position:absolute and then top/bottom coordinates and then the object will always be x pixels from the top and then x pixels from the bottom
    Code:
    #wrapper
    {
      position:absolute;
      top:20px;/*always 20px from the top*/
      bottom:40px;/*always 40px from the bottom*/
    }
    IE6 will need an expression however

    Is that waht you meant?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it is not content wrapper or something like that. I talking about the body! To be sure I've test it, but nothing changes.
    What I'm asking is that the body get always the height of the 'viewport' of the browser. (And I don't know if I say it good but what I mean with the viewport of the browser is the browser area for the site in or other words screen height minus navigation bar minus tab bar minus ...).

    Because what do you mean by "bottom:40px:" of what for the body?

    Nico

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's impossible with CSS to change the viewport height (height of the browser) . You would require scripting such as Javascript, however for security reasons, I believe they don't let you mess with that

    You can however, make that 969px or 845px the height of hte content (which was what I was trying to explain above)

    My code above will place an element (absolutely, out of the flow) 20px from the tpo of the containing block (the viewport if none set) and 40px from the bottom of the screen(if no containing block is set)

    Try it out, create a div and use my code (put a background on it to see)

    Mess with the viewport height and notice how the box changes height with the viewport.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, but I don't want to change anything of the browser like height.

    What I want is to change the body height of my web page according to the screen resolution.
    Let say if I have a screen resolution of 1400 x 900 px my body height should be:
    900 minus the navigation bar height minus tabbar height, minus the development toolbar height).

    I want to know the 'netto viewport' (or how do you call it) of the browser. If I read mozilla then it should be innerHeight. And how can I resize the body height to the innerHeight?

    Nico

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    html {height:100%}
    body {height:100%; overflow:auto}
    Birnam wood is come to Dunsinane

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Let say if I have a screen resolution of 1400 x 900 px my body height should be:
    900 minus the navigation bar height minus tabbar height, minus the development toolbar height).
    Thing is, your nav bar etc are inside the body... all your page is inside the body, and all the browser chrome (tab bar, dev toolbar) are always outside the page. So what Ryan is saying is, the body is maybe not the best element to be doing stuff like this... because the body is "bruto" and inclusief the nav etc. (actually you can think of html element as bruto but the body is practically bruto most of the time)

    <html>
    <body>
    Everything that appears on the page itself... you cannot control browser chrome, that is for users to decide...
    </body>
    </html>
    That's always your whole page.

    So for your netto you'd want another element.

    What confused me is, usually the body is already, by default, 100% high and wide.

    I mean, if I tile a background image on the body, I see it no matter how big or small my screen. Body just fills it. Body and html elements are maybe the only ones who do this, and it is possible to make the body less with code, but I guess I would like to see an image describing what you want. Seems like you want the colour or background image of the body to NOT be behind the nav?

  8. #8
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    What confused me is, usually the body is already, by default, 100% high and wide.
    Well, no, not really. Yes, the body element usually occupies the full width of the viewport (minus any default margins/padding in the user agent style sheet). But it normally extends vertically only as far as needed to enclose the document's content.
    Birnam wood is come to Dunsinane

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    But it normally extends vertically only as far as needed to enclose the document's content.
    Why do background images tiled on the body fill my viewport vertically then, instead of stopping after the document's content like other elements do? I take that as meaning body is naturally being 100% high (maybe this is a natural 100% height of the html element, but then html is naturally 100% high).

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Why do background images tiled on the body fill my viewport vertically then, instead of stopping after the document's content like other elements do?
    Because,

    Quote Originally Posted by W3C
    The background of the root element becomes the background of the canvas and covers the entire canvas...

    ... For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element.
    Source: Colors and Backgrounds in the CSS2.1 specification.
    Birnam wood is come to Dunsinane

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element
    this is different from the actual body element's value?!??

    *edit good lord it is... I thought I had this all tested out, but border: 5px solid #f00 shows otherwise...

    back to the stomme poes, niet een slimme poes!

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    this is different from the actual body element's value?!??
    Yep. The difference is a bit esotheric, but it's there.
    Birnam wood is come to Dunsinane

  13. #13
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oke, I'm further but I think the confusion is right and I think it is made by myself.
    I thought I've to change the body height, but I can change my container (id="maincontainer") height and then I nearly reached my goal if realy should know the 'netto view port' height I think.

    Here is my code:
    HTML Code:
    <html>
      <body>
        <div id="maincontainer">
          .....
        </div>
      </body>
    </html>
    
    <script type="text/javascript">
    document.getElementById('maincontainer').style.height = (document.documentElement.clientHeight-310 - 60) + 'px';
    alert(document.getElementById('maincontainer').style.height);
    </script>
    explanation:
    310 = header + sponsor height part.
    60 = is the footer height + ... browser bars of the browser? (my footer is far less then 60px heigh!).
    But by subtracting the (310 + 60)px, the footer comes just above the status bar at the bottom of the browser.

    But it is not possible to get just the netto view port of the browser or....

    Thanks in advance.

    Nico
    Attached Images Attached Images

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Do you want a fixed footer, or something like that?

    Or perhaps a sticky footer?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    But it is not possible to get just the netto view port of the browser or....
    I think instead, you might want to do what we do: we fake it.

    I don't know what this maincontainer has in it that people see, but you can make it LOOK like it fills "all remaining space" with trickery and deceit.

    <html>
    <body>
    <div id="maincontainer">
    <top sponsor stuff, 100% wide and a background colour so you can't see maincontainer peeking out from behind it>

    rest of the page...
    </div>
    <div id="footer">
    footer
    </div>
    </body>
    </html>

    However this means you'd need to use the sticky footer as Ryan mentioned.

    html, body {
    height: 100%; /*by setting this, you are able to make maincontainer 100% high*/
    }

    #maincontainer {
    min-height: 100%;
    }
    * html #maincontainer {height: 100%;} /*IE6 if you care about it*/

    So Maincontainer is now 100% high. That means you cannot add any top or bottom borders, margins or padding.

    So your sponsor stuff can be inside maincontainer but you can make it LOOK like maincontainer begins after them... if maincontainer has a top border for example, instead give this to the bottom of the sponsor block. If the sponsor stuff has a background colour, nobody will see that maincontainer actually starts at the top of the page. They'll only see it coming after the sponsor block.

    Then the sticky footer, which basically makes the footer sit right on top of the bottom of maincontainer. The nadeel with sticky footers is you need to know the height. You can have an em-based height, but no dynamic heights.

    Also then, some inner container inside mainconainter will have to have enough bottom padding to make room for this footer.

    If maincontainer was to have a border or something on the "bottom" then, like the sponsor box, you would instead put this on the top of the footer.

    sort of an example, the purplish area should be like your maincontainer

    Though the footer there is not a sticky footer, but you can see what those do from Ryan's links.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Are you talking about something like this or this or this which uses the method Ryan mentioned in the first reply.

  17. #17
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    What I've seen helped me a lot. It is the first 'this' of Paul O'B where I'm looking for but tonight I don't have much time. I will further look at in the weekend.

    Thanks,

    Nico

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I told you the method Paul showed you just now in my first post in this thread but you said it wasn't what you needed . I'm a bit confused but it seems to be what you need so I'm glad for that .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    When you're getting started in web design, esp in your 2nd/3rd/whatever language, it's easy to have trouble telling if some particular technique is what you want.


    I honestly couldn't tell until I saw that screenshot/upload.

    'k wens je veel sucess Nico... als je wat vragen hebt, vraag maar!

  20. #20
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apologize guys for all the confusion I have made.

    But in all my simplicity I thought the maincontainer is inside the body. So if I make the body less height then my maincontainer is less height as well. But I understand now that was wrong thinking.

    Maar Stomme poes ik heb nog wel een vraag in mijn 1e taal. Het ligt waarschijnlijk meer aan mij dan aan jou maar ik (wij) begrijp(en) niet goed wat je nu bedoeld met "...it's easy to have trouble telling if some particular technique is what you want."

    But anyway, thanks all.

  21. #21
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Nico,
    it was in reference to Ryan's post above mine.

    At first we were confused on what exactly you wanted. Looking at the image you posted, we would probably call that a "scrolling div" or sometimes "css frames" (they look like frames but aren't... instead they are created via CSS).

    Newbies often don't know jargon names like "overflow/scroll box", "sticky footer" etc. They are names for certain techniques that you only pick up over time usually.

    I'm confused again:
    But in all my simplicity I thought the maincontainer is inside the body. So if I make the body less height then my maincontainer is less height as well. But I understand now that was wrong thinking.
    Maincontainer certainly IS in the body, yes.

    But the body is a sort special container. It sometimes has rules that other, regular boxes don't.

    Also, if you have two regular boxes:
    <div id="foo">
    <p>stuff...</p>
    <div id="bar">
    <p>more stuff...</p>
    </div>
    </div>

    If #bar has some set height like 10em, then #foo naturally must be bigger (or at least as big) but if #foo had started out really really big, like height: 20em; then you'd have

    #foo {
    height: 20em; (em ~= the size of "m")
    }
    #bar {
    height: 10em;
    }

    If later you make #foo smaller, #bar does not change. Though you won't be able to make #foo smaller than #bar. But if
    #foo {
    height: 13em;
    }

    #bar doesn't shrink too.

    maar ik (wij) begrijp(en)
    You representing a group/company?

  22. #22
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    All helped me a lot further and I know now what a sticky footer is. I will never forget.
    But now I have the problem that the content is running out of the div and out of the browser viewport. Can someone tell me where I have missed the turning point? I have tried a lot: float, position absolute, relative, fixed, bottom 0, 173, -173px but nothing solves my problem. I add the css+html file to see what I mean and you can also see it on http://test.nicovandekamp.nl

    Thanks in advance.

    Nico
    Attached Files Attached Files

  23. #23
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You are making big logic errors with your code.

    If you have an absolute element that you have set to top:150px and then you give it 100&#37; height it will then always be 150px too big for wherever you place it. You cannot use 100% height in this way.

    For absolute elements you can set the top and bottom co-ordinates to create the height you need.

    e.g.
    Code:
    #contentwrapper{
        position:absolute;
        background:#ffffcc;
        width:840px !important;
    /* height removed*/
        top:153px;
        bottom:173px;
        overflow:hidden;
    }
    #contentcolumn{
        margin-left: 200px; /*Set left margin to LeftColumnWidth*/
        overflow:auto;
        padding:10px;
        border: 2px solid #aaa;
        /*height:100%;   remove*/
        position:absolute;
        top:0;
        left:0px;
        bottom:0;
        display:block;
    }
    Of course that doesn't address Ie6 as it doesn't understand top and bottom when specified together so I hope you don't want support for ie6 as it will get very complicated.


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
  •