www.webdeveloper.com
Results 1 to 5 of 5

Thread: Page 100% height or more

  1. #1
    Join Date
    Apr 2013
    Posts
    1

    Page 100% height or more

    Hello!

    I hope that someone can help me.
    My case: http://jsfiddle.net/ZZBA4/2/

    What is the problem.
    - I want CONTAINER height 100% of display or more if CONTENT has biger text.
    - I want LEFT and RIGHT to be the same height as CONTAINER
    - HEADER and FOOTER has fixed height. HEADER is on top, FOOTER is at bottom, and CONTENT is all over the midle area.
    - I want that CONTEN is also 100% of page - (HEDER and FOOTER), or more if there is bigger text.

    Thank you!

  2. #2
    Join Date
    Oct 2007
    Posts
    126
    I don't think you can solve it easily. I have exactly the same issue and had to resort to jQuery. Use height: 100% on body and html selectors and then min-height:100% on wrapper / container div will go some way to fix it but won't solve it completely. Also using position:absolute instead of floats however you may not get your wrapper to wrap around your content divs. This may or may not be a problem for you. Also a nice neat trick which you may be able to adapt here: http://matthewjamestaylor.com/blog/e...r-css-no-hacks That uses floats so may serve better. This really should be easier to do in CSS!

    Hope that helps
    Last edited by cannon303; 05-04-2013 at 03:35 PM.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,139
    You mean something like:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Fixed Header and Footer with Side Columns</title>
    <style>
    
     html,body { height:100%; margin:0; padding:0; }
    
    #CONTAINER {
        height:99.5%;
        border:solid 2px red;
        width:400px;
    }
    
    #LEFT {
        float:left;
        background-color:yellow;
        width:20px;
        height:100%;
    }
    #RIGHT{
        float:right;
        background-color:orange;
        width:20px;
        height:100%;
    }
    #CENTER {
        position:relative; top:0; left:0;
        margin-left:20px; margin-right:20px;
        background-color:blue;
        height:100%;
    }
    
    #HEAD{
        position:absolute; top:0; left:0;
        background-color:green;
        width:100%;
        height:5%;
        min-height:33px;
    }
    #CONTENT{
        position:absolute; top:5%; left:0;
        background-color:pink;
        width:100%;
        height:90%;
        margin:0px;
    }
    #FOOTER{
        position:absolute; bottom:0; left:0;
        background-color:purple;
        width:100%;
        height:5%;
        min-height:33px;
    }
    
    </style>
    </head>
    <body>
    <div id="CONTAINER">
      <div id="LEFT"></div>    
      <div id="RIGHT"></div>
      <div id="CENTER">
        <div id="HEAD"></div> 
        <div id="CONTENT"></div>
        <div id="FOOTER"></div>
      </div><!-- end #CENTER -->
    </div><!-- end #CONTAINER -->
    </body>
    </html>
    Keep in mind that 'padding' and 'border' properties add to the size of the element on the page, so when you mix fixed measurements in a flexible layout (ie. it responds to changes in window size), it gets complicated.
    Rick Trethewey
    Rainbo Design

  4. #4
    Join Date
    Mar 2011
    Posts
    1,139
    I'm sorry. I just realized that my example wouldn't really do everything you wanted. It mostly gets the structure right, but it doesn't flex. I'll take another run at it when I get a chance.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Oct 2007
    Posts
    126
    Quote Originally Posted by rtrethewey View Post
    I'm sorry. I just realized that my example wouldn't really do everything you wanted. It mostly gets the structure right, but it doesn't flex. I'll take another run at it when I get a chance.
    Yes it would be great if you can solve it but don't think you will. The problem comes with forcing the container past the 100% viewport height should the content dictate, while still wrapping around all content divs.

    But there's the challenge!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles