Body width/height 100%

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

    Body width/height 100%

    How do you give a <body> a 10px margin on every side, then a border? That
    is, an inset border.

    In the example below, the browsers I've tried interpret "width:100% " as 100%
    of the width including margins (the same width the height). As the actual
    display area for the body contents is the window display area minus the CSS
    margin, scroll bars show up.

    I don't want hard-coded dimensions, the body should resize and reflow (and,
    when needed, scroll bars show up) as the window is resized.

    --
    Joakim Braun

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    <html>
    <head>
    <title>demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    body{margin:10p x;border:1px solid black;width:100 %;height:100%;}
    </style>
    </head>
    <body>
    </body>
    </html>


    Tags: None
    • Jón Fairbairn
      #2
      Re: Body width/height 100%

      "Joakim Braun" <joakim.braun@j fbraun.removeth is.com> writes:
      [color=blue]
      > How do you give a <body> a 10px margin on every side, then a border? That
      > is, an inset border.[/color]

      What do you want to happen to the border when
      (a) the content of the body doesn't fill the viewport
      (b) it's larger, so it needs to scroll?
      [color=blue]
      > In the example below, the browsers I've tried interpret
      > "width:100% " as 100% of the width including margins (the
      > same width the height).[/color]

      As it's supposed to (whether or not one thinks that is a
      sensible model). If you set width: auto you get something
      more agreeable. For height, it's not clear where you want
      the bottom border to appear. If you set height: auto, you'll
      get something which, when the content is large enough, will
      leave a 10px margin at the bottom when scrolled to the
      bottom, but a much bigger one if the content isn't big
      enough.

      --
      Jón Fairbairn Jon.Fairbairn@c l.cam.ac.uk

        Comment

        • Jón Fairbairn
          #3
          Re: Body width/height 100%

          "Jón Fairbairn" <jon.fairbairn@ cl.cam.ac.uk> writes:
          [color=blue]
          > "Joakim Braun" <joakim.braun@j fbraun.removeth is.com> writes:
          >[color=green]
          > > How do you give a <body> a 10px margin on every side, then a border? That
          > > is, an inset border.[/color]
          >
          > What do you want to happen to the border when
          > (a) the content of the body doesn't fill the viewport
          > (b) it's larger, so it needs to scroll?[/color]
          [color=blue]
          > [...] For height, it's not clear where you want
          > the bottom border to appear. If you set height: auto, you'll
          > get something which, when the content is large enough, will
          > leave a 10px margin at the bottom when scrolled to the
          > bottom, but a much bigger one if the content isn't big
          > enough[/color]

          I forgot to add that if you set the margin and border on
          html instead of on body, you get something that fits the
          viewport if the content is small. I'm not sure whether this
          is behaviour one can rely upon, though.

          --
          Jón Fairbairn Jon.Fairbairn@c l.cam.ac.uk

            Comment

            • Uncle Pirate
              #4
              Re: Body width/height 100%

              Joakim Braun wrote:
              [color=blue]
              > How do you give a <body> a 10px margin on every side, then a border? That
              > is, an inset border.
              >
              > In the example below, the browsers I've tried interpret "width:100% " as 100%
              > of the width including margins (the same width the height). As the actual
              > display area for the body contents is the window display area minus the CSS
              > margin, scroll bars show up.
              >
              > I don't want hard-coded dimensions, the body should resize and reflow (and,
              > when needed, scroll bars show up) as the window is resized.[/color]

              Forget the 10px and go with a small percentage, say 2 or 3? Then
              subtract your percentage for margins from the width you want.

              Height is another story. Body height is based upon content rather than
              browser window size. It's better to leave it alone although you can go
              through some contortions to set it. Do some studying at:
              http://www.w3.org/TR/REC-CSS2/ about absolute positioning and possibly
              margins if you REALLY want to still set the height. I can't tell you
              right off as this is something I don't even try to do.

              --
              Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
              Webmaster/Computer Center Manager, NMSU at Alamogordo
              Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
              '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
              A zest for living must include a willingness to die. - R.A. Heinlein

                Comment

                • Joakim Braun
                  #5
                  Re: Body width/height 100%

                  "Uncle Pirate" <stan@surecann. com> skrev i meddelandet
                  news:41fbcf0c$1 @nntp.zianet.co m...[color=blue]
                  > Joakim Braun wrote:
                  >[color=green]
                  > > How do you give a <body> a 10px margin on every side, then a border?[/color][/color]
                  That[color=blue][color=green]
                  > > is, an inset border.
                  > >
                  > > In the example below, the browsers I've tried interpret "width:100% " as[/color][/color]
                  100%[color=blue][color=green]
                  > > of the width including margins (the same width the height). As the[/color][/color]
                  actual[color=blue][color=green]
                  > > display area for the body contents is the window display area minus the[/color][/color]
                  CSS[color=blue][color=green]
                  > > margin, scroll bars show up.
                  > >
                  > > I don't want hard-coded dimensions, the body should resize and reflow[/color][/color]
                  (and,[color=blue][color=green]
                  > > when needed, scroll bars show up) as the window is resized.[/color]
                  >
                  > Forget the 10px and go with a small percentage, say 2 or 3? Then
                  > subtract your percentage for margins from the width you want.
                  >[/color]
                  <snip>

                  Thanks, that's an idea.

                  What I'm trying to do is have an inset frame around the whole page, with the
                  contents being a header at the top stretching over 100% of the body width
                  minus margins, and below that an iframe filling the rest of the available
                  body area (and having scroll bars when needed). So the inset frame would
                  remain at most window sizes.

                  --
                  Joakim Braun


                    Comment

                    • Uncle Pirate
                      #6
                      Re: Body width/height 100%

                      Joakim Braun wrote:
                      [color=blue]
                      > What I'm trying to do is have an inset frame around the whole page, with the
                      > contents being a header at the top stretching over 100% of the body width
                      > minus margins, and below that an iframe filling the rest of the available
                      > body area (and having scroll bars when needed). So the inset frame would
                      > remain at most window sizes.[/color]

                      A link to the page you are trying to put together might help people come
                      up with better solutions.

                      --
                      Stan McCann "Uncle Pirate" http://stanmccann.us/pirate.html
                      Webmaster/Computer Center Manager, NMSU at Alamogordo
                      Coordinator, Tularosa Basin Chapter, ABATE of NM; AMA#758681; COBB
                      '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
                      A zest for living must include a willingness to die. - R.A. Heinlein

                        Comment

                        • Joakim Braun
                          #7
                          Re: Body width/height 100%

                          "Uncle Pirate" <stan@surecann. com> skrev i meddelandet
                          news:41fd1e86$1 @nntp.zianet.co m...[color=blue]
                          > Joakim Braun wrote:
                          >[color=green]
                          > > What I'm trying to do is have an inset frame around the whole page, with[/color][/color]
                          the[color=blue][color=green]
                          > > contents being a header at the top stretching over 100% of the body[/color][/color]
                          width[color=blue][color=green]
                          > > minus margins, and below that an iframe filling the rest of the[/color][/color]
                          available[color=blue][color=green]
                          > > body area (and having scroll bars when needed). So the inset frame would
                          > > remain at most window sizes.[/color]
                          >
                          > A link to the page you are trying to put together might help people come
                          > up with better solutions.[/color]

                          https://www.jfbraun.com/trash/demo.htm



                            Comment

                            Previous template Next
                            Working...