SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: min-height:100%

  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    min-height:100%

    I want to be 'container' and 'main' always in full height


    CSS
    -----------------------------------------------

    html, body{
    height:100%;
    }

    body{
    background:#224343;
    font-family:Arial, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-align:center
    }


    #container{
    display:block;
    width:1000px;
    min-height:100%;
    height:auto!important;
    height:100%;
    background:#1c3838 url(../background/cont_bckg.png) repeat-x top;
    margin:0 auto;
    position:relative;

    }




    #main{
    display:block;
    background:#fff;
    width:958px!important;
    width:960px;
    min-height:100%;
    height:auto!important;
    height:100%;
    border-left:#000000 solid 1px;
    border-right:#000000 solid 1px;
    position:relative;
    margin:0 20px;
    padding:259px 0 0 0;

    }

    HTML
    -----------------------------------------------
    <div id="container">
    <div id="main">info</main>
    </div>


    If one div then work, if more then not.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Ah this is a common question-one of the main functions of 100&#37; height. You can only have 1 element 100% height. It's just the way it is and I won't try to explain, but rather let Paul.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A percentage height can only reference the SET height of its parent - if the parent's height is "auto", then any percentage reference to this will also be "auto". So as the #container's height is auto, none of its children can be forced to follow its height.

    The trick is to make it just look like #main goes the full height, even if it actually doesn't.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The trick is to make it just look like #main goes the full height, even if it actually doesn't.
    That's exactly where I was going to take it too.

    @npc

    Your container is 1000px wide and the main is 960px. What is the 40px difference for?

    I'm guessing it is for full height borders.

    Explain to us further just what your wanting to accomplish, whether it is a full height border image with the 40px or a working two-column layout.

    There are several different ways to approach it.

  5. #5
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shema

    40px difference is gradient border;

    My image http:// img390. imageshack. us/ img390/ 6704/ height.jpg

    (Sorry for the gap. I do not have 10 posts)

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    http://img390.imageshack.us/img390/6704/height.jpg

    It looks like the top section (everything above the green) could be sliced off and placed as a background for a full width header.

    Then the green gradient would obviously go on the body and then positioned down to begin below the header along with a BG color to pick up where the gradient ends.

    The side borders and content background could be one thin slice repeated-y on the wrapper div.

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It seems a good idea.

    The complexity hiden in simplicity


Bookmarks

Posting Permissions

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