5 Replies Latest reply on Dec 3, 2008 8:49 PM by Newsgroup_User

    Help need div to expand to height of browser

    Level 7
      Hi is it possible with CSS to get a div to expand to the height of the
      browser (IE6, IE7 FF etc.).

      On this design I need to have the 'Nav column' and 'main content area' to
      end at the bottom of the browser. It works OK when the content in the 'main
      content area' is longer than the height of the browser. But when the content
      is less than the height - then the background is shown after the end of the
      Nav + main sections.

      I have read that you can set the Body to 100% then use min-height on a DIV,
      but can't seem to get this to work

      site is http://www.visit-the-coqui.com/Demo/index.html

      and http://www.visit-the-coqui.com/Demo/about.html

      CSS is http://www.visit-the-coqui.com/Demo/styles.css

      Thanks for any help

      --
      B
      http://www.visit-the-coqui.com
      If you are thinking of a vacation to Puerto Rico

      http://www.thegadgettraveler.com
      Travel gadget and other news here



        • 1. Re: Help need div to expand to height of browser
          Level 7
          "B" <bw....@r....com> wrote in message
          news:gh3c7d$hd4$1@forums.macromedia.com...
          > Hi is it possible with CSS to get a div to expand to the height of the
          > browser (IE6, IE7 FF etc.).
          >
          > On this design I need to have the 'Nav column' and 'main content area' to
          > end at the bottom of the browser. It works OK when the content in the
          > 'main content area' is longer than the height of the browser. But when the
          > content is less than the height - then the background is shown after the
          > end of the Nav + main sections.


          Your best bet to accomplish that would be to use a centered image on the
          body tag serving as faux columns, but that will only work with a fixed
          width, and you'll be using up your body background image, so....

          --
          Tim G.
          http://www.pactumweb.com
          http://www.shortordersite.com

          Be smart: http://www.pactumweb.com/client/tips.php


          • 2. Re: Help need div to expand to height of browser
            Level 7
            But I need the body background to tile horizontally so that the right hand
            side has the white section on top and the same dark color underneath.



            --
            B
            http://www.visit-the-coqui.com
            If you are thinking of a vacation to Puerto Rico

            http://www.thegadgettraveler.com
            Travel gadget and other news here


            "Tim G" <webservicesNOSPAM@pactumgroup.com> wrote in message
            news:gh3clc$htn$1@forums.macromedia.com...
            > "B" <bw....@r....com> wrote in message
            > news:gh3c7d$hd4$1@forums.macromedia.com...
            >> Hi is it possible with CSS to get a div to expand to the height of the
            >> browser (IE6, IE7 FF etc.).
            >>
            >> On this design I need to have the 'Nav column' and 'main content area' to
            >> end at the bottom of the browser. It works OK when the content in the
            >> 'main content area' is longer than the height of the browser. But when
            >> the content is less than the height - then the background is shown after
            >> the end of the Nav + main sections.
            >
            >
            > Your best bet to accomplish that would be to use a centered image on the
            > body tag serving as faux columns, but that will only work with a fixed
            > width, and you'll be using up your body background image, so....
            >
            > --
            > Tim G.
            > http://www.pactumweb.com
            > http://www.shortordersite.com
            >
            > Be smart: http://www.pactumweb.com/client/tips.php
            >


            • 3. Re: Help need div to expand to height of browser
              Level 7
              "B" <bw....@r....com> wrote in message
              news:gh3egj$k6o$1@forums.macromedia.com...
              > But I need the body background to tile horizontally so that the right hand
              > side has the white section on top and the same dark color underneath.

              You're not specifying clearly what you need. A tile horizontally across the
              top of the page is very easy to achieve via all sorts of methods. Do you
              need to tile an image elsewhere on the body?

              --
              Tim G.
              http://www.pactumweb.com
              http://www.shortordersite.com

              Be smart: http://www.pactumweb.com/client/tips.php


              • 4. Re: Help need div to expand to height of browser
                Level 7
                Hi Tim

                Apologies if my explainantion was not that clear.

                I think I have sorted it.

                My main issue was making sure that the colors to the right of the layout and
                below the layout matched the main design

                I was using a fixed width floated left and so had the background tiled
                horizontally (white on top dark underneath) so that the white and dark would
                continue to the right of the page. - this meant that a page that was shorter
                than the browser would show with the dark part of the background underneath.

                I have now made the body width 100% as well as the other divs so that they
                will fill up the width of the browser and then set a background to tile
                vertically with a fixed white width that matches the Nav section - seems to
                look OK now

                Thanks for your help and if the above still makes no sense - sorry again -
                but I knwo what I mean :o)

                --
                B
                http://www.visit-the-coqui.com
                If you are thinking of a vacation to Puerto Rico

                http://www.thegadgettraveler.com
                Travel gadget and other news here


                "Tim G" <webservicesNOSPAM@pactumgroup.com> wrote in message
                news:gh50hc$kbf$1@forums.macromedia.com...
                > "B" <bw....@r....com> wrote in message
                > news:gh3egj$k6o$1@forums.macromedia.com...
                >> But I need the body background to tile horizontally so that the right
                >> hand side has the white section on top and the same dark color
                >> underneath.
                >
                > You're not specifying clearly what you need. A tile horizontally across
                > the top of the page is very easy to achieve via all sorts of methods. Do
                > you need to tile an image elsewhere on the body?
                >
                > --
                > Tim G.
                > http://www.pactumweb.com
                > http://www.shortordersite.com
                >
                > Be smart: http://www.pactumweb.com/client/tips.php
                >


                • 5. Re: Help need div to expand to height of browser
                  Level 7

                  "B" <bw....@r....com> wrote in message
                  news:gh5tsf$pej$1@forums.macromedia.com...
                  > Hi Tim
                  >
                  > Apologies if my explainantion was not that clear.
                  >
                  > I think I have sorted it.
                  >
                  > My main issue was making sure that the colors to the right of the layout
                  > and below the layout matched the main design
                  >
                  > I was using a fixed width floated left and so had the background tiled
                  > horizontally (white on top dark underneath) so that the white and dark
                  > would continue to the right of the page. - this meant that a page that was
                  > shorter than the browser would show with the dark part of the background
                  > underneath.
                  >
                  > I have now made the body width 100% as well as the other divs so that they
                  > will fill up the width of the browser and then set a background to tile
                  > vertically with a fixed white width that matches the Nav section - seems
                  > to look OK now
                  >
                  > Thanks for your help and if the above still makes no sense - sorry again -
                  > but I knwo what I mean :o)


                  As long as you've got it working. But a general rule of thumb is: use the
                  body tag to do the difficult placement work with background.

                  USE THE BODY TAG FOR....

                  The two most difficult image placement aims to accomplish without using the
                  body tag are: 1) complete tiling filling the whole window; 2) vertical
                  tiling from top to bottom.

                  Obviously, if you need to tile an image in the whole window, do that with
                  the body tag.

                  But if you don't require a full background tile, and you do need to have an
                  image reach to the bottom of the page (whether via tile or otherwise), use
                  the body tag for that. Note that if you're doing a vertical tile only and
                  don't need an image for the rest, you can still combine your body background
                  properties so that you get both the vertical tile and a background colour.
                  E.g.:

                  body {
                  background:#ff0000 url(/images/bodybg.jpg) top left repeat-y;
                  }

                  That will give you an image tiling down the left side of your page, and the
                  rest of the window will have a bright red background.

                  USE OTHER TAGS FOR HORIZONTAL WORK AT TOP OF PAGE

                  As I said, doing a horizontal tile along the top is easy and can be
                  accomplished via a number of methods. The reason it's easy is that unless
                  specified otherwise, block-level elements flow to the width of their
                  container by default, and start at the top by default. So you only have to
                  get some height in there in order do horizontal tiling at the top of the
                  page.

                  E.g.

                  body { margin:0; padding:0; }
                  #header {
                  background:url(/images/hdrbg.jpg) top left repeat-x;
                  height:150px;
                  }

                  Here I presuppose that your header is 100% the width of the page and your
                  image is 150px high and needs to be tiled horizontally. There are of course
                  all sorts of other variations. (E.g. where you want your header image to be
                  above other content in the header, you would specify 150px top padding
                  instead of height - and all other things being equal it's always safer to
                  specify padding than height, so that you don't overflow your container.)
                  Note that horizontal and top margin and padding must be at 0 in order to get
                  your image to go from top left edge to top right edge. If you want a
                  variation on that, adjust to suit.

                  Alternatively, if you just want that tiled horizontal background to appear
                  to the left and right of your content, you can create an absolutely
                  positioned div to hold it. Then you will need to make your wrapper
                  relatively positioned in order to make sure your z-index gets your content
                  "in front" of your AP:

                  #toptile {
                  position:absolute;
                  top:0;
                  left:0;
                  width:100%;
                  height:150px;
                  z-index:1;
                  }
                  #wrapper {
                  position:relative;
                  z-index:2;
                  /* your other rules */
                  }


                  --
                  Tim G.
                  http://www.pactumweb.com
                  http://www.shortordersite.com

                  Be smart: http://www.pactumweb.com/client/tips.php