border on 100% height body creates scroll

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • msoliver
    #1

    border on 100% height body creates scroll

    I'm trying to figure out why the following creates a vertical scroll
    bar.

    Browser is IE 7 - using XHTML 1.0. I expand html and body to height
    of 100% and then I want to put a border around the whole viewport.
    What happens is that I get a vertical scrollbar (which I can hide, of
    course).

    Essentially what I'd like to know why adding a border increases the
    block but not the 100% sized viewport (and thus the scrollbar).

    Thanks!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
    www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Test Page</title>
    <style type="text/css">

    html
    {
    height:100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    }

    .bodyContent
    {
    height:100%;
    margin: 0px;
    padding: 0px;
    border-right:Red 1px solid;
    border-bottom:Red 1px solid;
    }

    </style>

    </head>
    <body class="bodyCont ent">
    <table style="border-collapse:collap se;width:100%;h eight:100%"
    cellpadding="0" cellspacing="0" >
    <tr>
    <td>R</td>
    <td>R</td>
    <td>R</td>
    <td>R</td>
    </tr>
    <tr>
    <td>R</td>
    <td>R</td>
    <td>R</td>
    <td>R</td>
    </tr>
    </table>
    </body>
    </html>
    Tags: None
    • dorayme
      #2
      Re: border on 100% height body creates scroll

      In article
      <cd5cad54-e7e4-4e36-af66-04d5069d1327@p1 0g2000prf.googl egroups.com>,
      msoliver <michaelsoliver @gmail.comwrote :
      I'm trying to figure out why the following creates a vertical scroll
      bar.
      >
      Browser is IE 7 - using XHTML 1.0. I expand html and body to height
      of 100% and then I want to put a border around the whole viewport.
      What happens is that I get a vertical scrollbar (which I can hide, of
      course).
      >
      Essentially what I'd like to know why adding a border increases the
      block but not the 100% sized viewport (and thus the scrollbar).
      You can't do much via CSS to the viewport. It is just a window through
      which to see webpages, If they don't fit, the browser gives you scroll
      bars to bring stuff into view. the size of the viewport is really just
      under your control, you can make it as big as your screen or as small as
      it will go.

      When you add borders to an element, the content part of the element does
      not shrink to accommodate the borders. The borders go on in addition.
      And the browser insists they might be something you want to see and so
      it brings up scrolling. The scrollbars get counted

      <http://dorayme.890m.co m/alt/oliver.html>

      If you have already set the height of the html element to be 100% of the
      viewport and then body also to 100% of the html, and further if you set
      a div inside body to be 100% of body, then where are borders to go? They
      go out of view.

      You might think, so who cares about borders. Well, imagine the Russians
      are on to you and you know that the thickness and colour of the borders
      are a possibly informative sign to their agents about whether the
      Kremlin requires your elimination or merely your cellar to store some
      vodka without paying duty on it. If you know the signs, you will want to
      see those borders and the browser is your friend here. It gives you the
      means. No browser I know of has ever been Russian friendly. The Russians
      did try to make a browser that had no scrollbars but it was an absolute
      disaster, like a car they made.

      If you don't believe all this stuff, that is quite ok. Just join some
      serious characters in the Reading Room and peruse:

      <http://www.w3.org/TR/CSS21/box.html>

      Perhaps you might also take a look at:

      <http://tinyurl.com/w322t>

      --
      dorayme

        Comment

        • Ben C
          #3
          Re: border on 100% height body creates scroll

          On 2008-09-23, dorayme <doraymeRidThis @optusnet.com.a uwrote:
          [...]
          No browser I know of has ever been Russian friendly. The Russians did
          try to make a browser that had no scrollbars but it was an absolute
          disaster, like a car they made.
          Setting overflow: hidden on the root element ought to get rid of the
          scrollbars on the viewport.

            Comment

            • dorayme
              #4
              Re: border on 100% height body creates scroll

              In article <slrngdhfvu.551 .spamspam@bowse r.marioworld>,
              Ben C <spamspam@spam. eggswrote:
              On 2008-09-23, dorayme <doraymeRidThis @optusnet.com.a uwrote:
              [...]
              No browser I know of has ever been Russian friendly. The Russians did
              try to make a browser that had no scrollbars but it was an absolute
              disaster, like a car they made.
              >
              Setting overflow: hidden on the root element ought to get rid of the
              scrollbars on the viewport.
              Yes. But I think the OP mentioned he did not want to do this (in an
              aside where he said he *could* hide the bars).

              He wanted to know what was really going on rather than how to cover up
              the effects he noticed. I gave him a little bit but was starting to get
              on to to a subject that can get a bit creepy, namely "viewport talk" and
              I had to stop because I don't know the OP and how he can cope with scary
              stuff. I don't go around talking about Ultimate Opaque Objects and
              Rectangles to just anyone. Please understand this. I am very
              responsible.

              --
              dorayme

                Comment

                • msoliver
                  #5
                  Re: border on 100% height body creates scroll

                  Thanks for your responses, but let me put the question more directly:

                  Using CSS, is there a way to make the content 100% height and have a
                  surrounding border without causing the overall content to increase in
                  size (which causes the scroll). Again, I'm talking about IE 7 here,
                  strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
                  container and is ignored when borders are added. If I avoid putting
                  the border on the <bodyand instead put it in a child DIV or TABLE, I
                  get the same problem.

                  Thanks!

                  - Mike

                    Comment

                    • Ben C
                      #6
                      Re: border on 100% height body creates scroll

                      On 2008-09-23, msoliver <michaelsoliver @gmail.comwrote :
                      Thanks for your responses, but let me put the question more directly:
                      >
                      Using CSS, is there a way to make the content 100% height and have a
                      surrounding border without causing the overall content to increase in
                      size (which causes the scroll). Again, I'm talking about IE 7 here,
                      strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
                      container and is ignored when borders are added. If I avoid putting
                      the border on the <bodyand instead put it in a child DIV or TABLE, I
                      get the same problem.
                      You could try:

                      body
                      {
                      position: absolute;
                      border: 5px solid black;
                      margin: 0; padding: 0;
                      top: 0; left: 0; bottom: 0; right: 0;
                      }

                      Don't know if it works in IE. It looks bad if your content is bigger
                      than the viewport, but that's just a reason not to try and put a border
                      across the bottom-- you never really know where the bottom is.

                        Comment

                        • dorayme
                          #7
                          Re: border on 100% height body creates scroll

                          In article <slrngdilr0.7pf .spamspam@bowse r.marioworld>,
                          Ben C <spamspam@spam. eggswrote:
                          On 2008-09-23, msoliver <michaelsoliver @gmail.comwrote :
                          Thanks for your responses, but let me put the question more directly:

                          Using CSS, is there a way to make the content 100% height and have a
                          surrounding border without causing the overall content to increase in
                          size (which causes the scroll). Again, I'm talking about IE 7 here,
                          strict HTML 4.0/CSS 2.0 mode. The 100% appears to apply only to the
                          container and is ignored when borders are added. If I avoid putting
                          the border on the <bodyand instead put it in a child DIV or TABLE, I
                          get the same problem.
                          >
                          You could try:
                          >
                          body
                          {
                          position: absolute;
                          border: 5px solid black;
                          margin: 0; padding: 0;
                          top: 0; left: 0; bottom: 0; right: 0;
                          }
                          >
                          Don't know if it works in IE. It looks bad if your content is bigger
                          than the viewport, but that's just a reason not to try and put a border
                          across the bottom-- you never really know where the bottom is.
                          I was amused to see Mac IE5's response:

                          <http://dorayme.890m.co m/alt/justPics/macie5response. png>

                          --
                          dorayme

                            Comment

                            Previous template Next
                            Working...