Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    div 100% height of body not working

    It seems 100% height of 2 divs is filling up their parent div correctly, but that parent div's 100% is not filling 100% height of body.

    vh1 + vh2 have height of 100% filling up containing div (vh12) of 200px correctly.
    When height of the parent block (vh12) changes, vh1 + vh2, fill up 100% of its height accordingly.

    However when I set vh12 to 100% (which is what I really want) I expect vh12's height to be 100% of its own parent block (body) which is 100%.
    Thus sub blocks vh1 + vh2 should fill up their parent vh12 which is 100% height of body which is 100% height of the browser window,
    thus vh1 + vh2 will fill up 100% height of the browser window.

    It is not working, when I set vh12 to be a % value for height its sub containers only display 1 tile of the background images.
    So basically, vh1 + vh2's 100% height of their parent div is working but vh12's 100% of its parent(body) is not working.

    I belive the problem is either in body styles or vh12 styles.
    I have experimented with min-height, and background repeat but they seemed to have no effect.


    //note only the code relavent to my problem is shown, I am pretty sure all the html+css code I left out will not be neccessary for you to see//

    ***start of html***
    <div id="vh12">
    <div id="vh1"></div>
    <div id="vh2"></div>
    </div>
    ***end of html***

    ***start of css***


    body {
    margin:0px;
    padding:0px;
    height:100% auto;
    }


    #vh12 {
    position:relative;
    width:696px;
    height:200px;
    z-index:1;
    }

    #vh1 {position:relative;
    width:110px;
    height:100%;
    float:left;
    z-index:1;
    background-image: url(h1stretch.jpg);
    }

    #vh2 {position:relative;
    width:586px;
    height:100%;
    float:right;
    z-index:1;
    background-image: url(h2stretch.jpg);
    }

    ***end of css***

  • #2
    Regular Coder Element's Avatar
    Join Date
    Jul 2004
    Location
    Lynnwood, Washington, US
    Posts
    855
    Thanks
    2
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by cyberdread
    It seems 100% height of 2 divs is filling up their parent div correctly, but that parent div's 100% is not filling 100% height of body.

    vh1 + vh2 have height of 100% filling up containing div (vh12) of 200px correctly.
    When height of the parent block (vh12) changes, vh1 + vh2, fill up 100% of its height accordingly.

    However when I set vh12 to 100% (which is what I really want) I expect vh12's height to be 100% of its own parent block (body) which is 100%.
    Thus sub blocks vh1 + vh2 should fill up their parent vh12 which is 100% height of body which is 100% height of the browser window,
    thus vh1 + vh2 will fill up 100% height of the browser window.

    It is not working, when I set vh12 to be a % value for height its sub containers only display 1 tile of the background images.
    So basically, vh1 + vh2's 100% height of their parent div is working but vh12's 100% of its parent(body) is not working.

    I belive the problem is either in body styles or vh12 styles.
    I have experimented with min-height, and background repeat but they seemed to have no effect.


    //note only the code relavent to my problem is shown, I am pretty sure all the html+css code I left out will not be neccessary for you to see//

    ***start of html***
    <div id="vh12">
    <div id="vh1"></div>
    <div id="vh2"></div>
    </div>
    ***end of html***

    ***start of css***


    body {
    margin:0px;
    padding:0px;
    height:100% auto;
    }


    #vh12 {
    position:relative;
    width:696px;
    height:200px;
    z-index:1;
    }

    #vh1 {position:relative;
    width:110px;
    height:100%;
    float:left;
    z-index:1;
    background-image: url(h1stretch.jpg);
    }

    #vh2 {position:relative;
    width:586px;
    height:100%;
    float:right;
    z-index:1;
    background-image: url(h2stretch.jpg);
    }

    ***end of css***

    Umm, correct me if I'm wrong but it looks like vh12 is actually set to 200px, not 100%.

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know but when I change it to 100% it dosnt work, it was set to 200px becuase It was showing that its child divs fill up 100% of it when it is 200px.
    My point is, divs within divs are filling up 100% but when parent div is set to 100% it dosnt take up 100% height of body.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this mate, not tested, but should work if memory serves me right

    Code:
    body, html {
    height: 100%
    }
    
    * html #vh12 {
    height:100%;
    }
    
    #vh12 {
    position:relative;
    width:696px;
    min-height:100%;
    z-index:1;
    }
    Gary


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •