DIV height

Discussion in 'HTML' started by Gav, Sep 14, 2006.

  1. Gav

    Gav Guest

    I have a container DIV that is 100% height and within that I have an
    absolute positioned DIV which contains my page header and has a height of
    60px. I would like to have another DIV (document body) within the container
    that fills the remaining space in the container (height wise), but if I put
    100% the height of the container is applied to the "document body" DIV and
    it overlaps the container. Is there another way for me to fill the remaining
    container space?

    thanks

    Gav
     
    Gav, Sep 14, 2006
    #1
    1. Advertising

  2. Gav

    Neredbojias Guest

    To further the education of mankind, "Gav" <> vouchsafed:

    > I have a container DIV that is 100% height and within that I have an
    > absolute positioned DIV which contains my page header and has a height
    > of 60px. I would like to have another DIV (document body) within the
    > container that fills the remaining space in the container (height
    > wise), but if I put 100% the height of the container is applied to the
    > "document body" DIV and it overlaps the container. Is there another
    > way for me to fill the remaining container space?


    Fill it with what?

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, Sep 17, 2006
    #2
    1. Advertising

  3. Gav

    Gav Guest

    "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html> wrote in
    message news:Xns9840CE7A7887Bhttpwwwneredbojiasco@208.49.80.251...
    > To further the education of mankind, "Gav" <> vouchsafed:
    >
    >> I have a container DIV that is 100% height and within that I have an
    >> absolute positioned DIV which contains my page header and has a height
    >> of 60px. I would like to have another DIV (document body) within the
    >> container that fills the remaining space in the container (height
    >> wise), but if I put 100% the height of the container is applied to the
    >> "document body" DIV and it overlaps the container. Is there another
    >> way for me to fill the remaining container space?

    >
    > Fill it with what?


    I just want the DIV itself to fill the remaining space. Heres what I have.

    <DIV id=wrapper>
    <DIV id=header>
    </DIV>

    <DIV id=menu>
    </DIV>

    <DIV id=content>
    </DIV>
    </DIV>

    wrapper = width:760px, height:100%
    header= width:100%, height: 60px;
    menu= width:200px; height: 100%;
    content=width:560px; height: 100%;

    What I would like is for the menu and content DIV's to fill the space
    between the header and the bottom edge of the wrapper regardless of the
    amount of content within them. But when I am using height:100% the height of
    the wrapper is used so I get an overlap of 60px over the bottom edge.

    Gav
    >
    > --
    > Neredbojias
    > Infinity has its limits.
     
    Gav, Sep 17, 2006
    #3
  4. Gav

    Neredbojias Guest

    To further the education of mankind, "Gav" <> vouchsafed:

    >
    > "Neredbojias" <http://www.neredbojias.com/fliam.php?cat=alt.html>
    > wrote in message
    > news:Xns9840CE7A7887Bhttpwwwneredbojiasco@208.49.80.251...
    >> To further the education of mankind, "Gav" <>
    >> vouchsafed:
    >>
    >>> I have a container DIV that is 100% height and within that I have an
    >>> absolute positioned DIV which contains my page header and has a
    >>> height of 60px. I would like to have another DIV (document body)
    >>> within the container that fills the remaining space in the container
    >>> (height wise), but if I put 100% the height of the container is
    >>> applied to the "document body" DIV and it overlaps the container. Is
    >>> there another way for me to fill the remaining container space?

    >>
    >> Fill it with what?

    >
    > I just want the DIV itself to fill the remaining space. Heres what I
    > have.
    >
    > <DIV id=wrapper>
    > <DIV id=header>
    > </DIV>
    >
    > <DIV id=menu>
    > </DIV>
    >
    > <DIV id=content>
    > </DIV>
    > </DIV>
    >
    > wrapper = width:760px, height:100%
    > header= width:100%, height: 60px;
    > menu= width:200px; height: 100%;
    > content=width:560px; height: 100%;
    >
    > What I would like is for the menu and content DIV's to fill the space
    > between the header and the bottom edge of the wrapper regardless of
    > the amount of content within them. But when I am using height:100% the
    > height of the wrapper is used so I get an overlap of 60px over the
    > bottom edge.


    Yes. Perhaps you can put the header and menu div (sans 100% height) in
    the content div? But you still haven't explained why you want 100%
    height.

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, Sep 18, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HJ
    Replies:
    5
    Views:
    864
    Jonathan N. Little
    Sep 1, 2006
  2. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    775
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    873
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    155
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    127
Loading...

Share This Page