Problem with 100% screen and scrollbars

Discussion in 'CSS' started by wwuster, Jan 19, 2010.

0
  1. #1
    I'm trying to draw a border around 100% of the screen on a page:

    http://www.hindbrain.net/ex6.php

    The problem is that I'm getting a horizontal and vertical scrollbar. How can you
    get a screen that is 100% with no scrollbars? You can 'view page source to see the
    very simple html and css.

    I'm viewing this page with firefox. The 1px 100% border is 2 pixels too wide and high, which causes scrollbars to appear. I'm trying to get rid of the scrollbars and have a 1px visible border around the entire page.

    thanks,
    William
     
    wwuster, Jan 19, 2010 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Don't set sizes and then add borders like that.

    If someone is 100% high and wide and then you add a 1px border around it, how tall and wide is it? 2px more in each direction! You can't have 101%! It's like eating more than 100% of a candy bar! Only possible in the 5th dimension man.

    Instead, the body will naturally be 100% tall and wide without you needing to mention it. So put the border on the body.

    And get a doctype on that thing. The 1990's are gone, dude.
     
    Stomme poes, Jan 20, 2010 IP
  3. fabriciogr

    fabriciogr Active Member

    Messages:
    958
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    73
    #3
    like you've noticed borders are added to the width. so if the width of your div is already 100% you're adding another 2 pixels to the width.

    i would try adding the border to the body instead:

    body {
    background-color: #ffffff;
    font-size: 24px;
    font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
    color:#400000;
    padding:0px;
    margin:0px;
    line-height: 2.0;
    border: #ff0000 1px solid;
    }

    }
     
    fabriciogr, Jan 26, 2010 IP
  4. Joak1m

    Joak1m Peon

    Messages:
    135
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Use negative margins... depending on the border size.
     
    Joak1m, Jan 26, 2010 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That wouldn't make the top and left border show, but that's actually pretty clever if you only needed the right and bottom border to show.
     
    Stomme poes, Jan 27, 2010 IP
  6. Joak1m

    Joak1m Peon

    Messages:
    135
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Well you're way makes more sense, I was too lazy to read it before.
     
    Joak1m, Jan 28, 2010 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I need to update my posts...
    because I was WRONG, woo.

    I had always thought the body automatically filled the viewport, because when you add background colours or images, it seems to.

    Apparently though the body isn't really filling all that space... instead, in the specs they made it that the body will have height: auto like other boxes and any backgrounds placed on it get transferred to the viewport.

    The body will, like other blocks, be 100% wide, but it actually isn't 100% tall. So I was very wrong and to have a border going around the page on the body the best way might be:

    let the sideborders be there, and don't specifically state the width... this way, the borders should be at the sides and the body will readjust its width (like other boxes do when you don't actually state the width and add borders). There's a change that occurs with static boxes who are normally 100% wide, once you state width: 100% that now refers to their inner content area, and adding padding, margins or borders make the box wider than 100%. NOT stating a width, added paddings, margins and borders do NOT make the box wider than 100%... instead the inner content area gets smaller.

    Meanwhile, a height DOES need to be set on the body because it actually does only get as big as the content. But since we want borders it can't be 100% so we could try 99% and see if that works : )

    body {
    height: 99%; (or min-height might be safer)
    border: 1px solid #f00;
    }


    I found this out when someone corrected me on another forum and I tried it:

    body {
    background: url(an image.png); (so the image automatically tiled all over the screen)
    border: 5px solid #000;
    }

    <body>
    <p>Some text..</p>
    <p>Some more text...</p>
    </body>

    So, there wasn't much content in the body.

    The background image assigned to the body covered the whole page, but the border was only as high as the two p's inside.

    Mah bad. What I get for randomly spewing out advice... it's sometimes BAD.
     
    Stomme poes, Feb 5, 2010 IP