#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    57
    Rep Power
    5

    Setting a minimum height for a div


    Apologies if this is incredibly basic but it's defeating my brain so I'm asking for help ;

    My page is divided up into header, content, and footer.

    Header is at the top of the page as you'd expect, content follows, and then the footer, locked to the bottom of the page unless it is pushed down by the content div. All as you'd expect.

    Equally unexpectedly, the content div is padded, has rounded corners, and box shadow - indicating that it's where the page's real information is presented.

    I want the content div to extend from just below the header to just above the footer even if the content div presents little or no information, and that is where I'm having difficulty.

    If I set the content div's position as "absolute", it doesn't push the footer down the page when there is an abundance of content in the content div.

    If I set the content div's position as "relative", it only extends down as far as required to present the information, and that could be a really small distance when only a small amount of information is presented, rather than to just above the footer as I'd like.

    Could some please tell me what I can do to present the content div as I wish ?

    Code for absolute:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <
    html>

    <
    head>

    <
    style>

    /* CSS Document */

    @media screenprojection {
     
    .
    BeNiceToMacIE5 {
    font-family"\"}\"";
    font-familyinherit;
    }

    html {
    margin0;
    padding0;
    width100%;
    height100%;
    background-color:#224597/*#200772*/;
    min-height100%;
    overflow-yscroll;
    overflow-xauto;
    }

    body {
    margin0;
    padding0;
    width100%;
    height100%;
    min-height100%;
    }

    #wrapper, wrapper2 {
        
    margin0;
        
    padding0;
        
    height100%;
        
    min-height100%;
    }

    html>bodyhtml>body #wrapper, html>body #wrapper2 {
    heightauto;
    }
     
    div#wrapper {
        
    positionabsolute;
        
    top0px;
        
    width96%;
        
    right:2%;
        
    left2%;
        
    background-image:url(../images/framework/wrapper01.gif);
        
    background-repeat:repeat;
        
    border-left1px solid #93A1CC;
        
    border-right1px solid #93A1CC;    
    }
     
    #header {
        
    height:154px;
        
    padding-top:15px;
        
    padding-right:30px;
        
    padding-bottom:0;
        
    padding-left:30px;
        
    background-color:#6C8CD5;
        
    position:relative;
    }
     
    #content01 { /* NB - ABSOLUTE */
        
    position:absolute;
        
    top:200px;
        
    right:30px;
        
    bottom:110px;
        
    left:30px;
        
    padding-top:0;
        
    padding-right:20px;
        
    padding-bottom:0;
        
    padding-left:20px;
        
    background-color#ffffff;
        
    border2px solid #93A1CC;
        
    border-radius:8px;
        -
    moz-box-shadow3px 3px 5px 0px #93A1CC;
        
    -webkit-box-shadow3px 3px 5px 0px #93A1CC;
        
    box-shadow3px 3px 5px 0px #93A1CC;
    }
     
    .
    clear {
    clearboth;
    margin0;
    padding0;
    }
     
    #footer {
    clearboth;
    bottom0px;
    left0;
    width100%;
    height78px;
    background:#6C8CD5/*#A1C4E8*/;
    border-top1px solid #93A1CC;
    color#fef9ee;
    overflow:hidden;
    }
    #footerContent {padding:10px;}
    #footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}
    #footerContent p {padding:5px 0; margin:0;}
     
    #main {
    margin0;
    padding0;
    }
    /* \*/
    html #footer {
    positionabsolute;
    }
    html #main {
    padding-bottom100px;
    }
    /* \*/
    head:first-child+body div#footer {
    positionabsolute;
    z-index:0;
    }
    head:first-child+body div#main {
    padding-bottom100px;
    }
     
    }
     
    @
    media all and (min-width:0px) {
    head~body {height:100%;}
    }

    </
    style>

    </
    head>
     
    <
    body>

    <!-- 
    wrapper begin -->
    <
    div id="wrapper">
            
        <
    div id="header">
        
            <
    div id="headercontent">
            
    HEADER
            
    </div><!-- id="headercontent" -->
        
        </
    div><!-- header ends -->
     
        <!-- 
    main begin -->
        <
    div id="main">
        
            <
    div id="content01"><!-- content01 begin -->
            
            <
    p>    
            
    CONTENT :
            
            <
    br /><br />
            
            
    Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasVestibulum tortor quamfeugiat vitaeultricies egettempor sit ametante.
            
            </
    p>
            
            </
    div><!-- content01 end -->
            
            <!-- 
    clear begin -->
            <
    div class="clear">
            </
    div>
            <!-- 
    clear end -->
                
        </
    div>
        <!-- 
    main end -->
     
        <!-- 
    footer begin-->
        <
    div id="footer">    
        
            <!-- 
    footerContent begin -->
            <
    div id="footerContent">
            
                
    FOOTER
            
            
    </div>
            <!-- 
    footerContent end -->
                    
        </
    div>
        <!-- 
    footer end -->
     
    </
    div>
    <!-- 
    wrapper end -->

    </
    body>

    </
    html
    Code for relative:
    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <
    html>

    <
    head>

    <
    style>

    /* CSS Document */

    @media screenprojection {
     
    .
    BeNiceToMacIE5 {
    font-family"\"}\"";
    font-familyinherit;
    }

    html {
    margin0;
    padding0;
    width100%;
    height100%;
    background-color:#224597/*#200772*/;
    min-height100%;
    overflow-yscroll;
    overflow-xauto;
    }

    body {
    margin0;
    padding0;
    width100%;
    height100%;
    min-height100%;
    }

    #wrapper, wrapper2 {
        
    margin0;
        
    padding0;
        
    height100%;
        
    min-height100%;
    }

    html>bodyhtml>body #wrapper, html>body #wrapper2 {
    heightauto;
    }
     
    div#wrapper {
        
    positionabsolute;
        
    top0px;
        
    width96%;
        
    right:2%;
        
    left2%;
        
    background-image:url(../images/framework/wrapper01.gif);
        
    background-repeat:repeat;
        
    border-left1px solid #93A1CC;
        
    border-right1px solid #93A1CC;    
    }
     
    #header {
        
    height:154px;
        
    padding-top:15px;
        
    padding-right:30px;
        
    padding-bottom:0;
        
    padding-left:30px;
        
    background-color:#6C8CD5;
        
    position:relative;
    }
     
    #content01 { /* NB - RELATIVE */
        
    position:relative;
        
    top:30px;
        
    margin-right:30px;
        
    margin-bottom:40px;
        
    margin-left:30px;
        
    padding-top:0;
        
    padding-right:20px;
        
    padding-bottom:20px;
        
    padding-left:20px;
        
    background-color#ffffff;
        
    border2px solid #93A1CC;
        
    border-radius:8px;
        -
    moz-box-shadow3px 3px 5px 0px #93A1CC;
        
    -webkit-box-shadow3px 3px 5px 0px #93A1CC;
        
    box-shadow3px 3px 5px 0px #93A1CC;
    }
     
    .
    clear {
    clearboth;
    margin0;
    padding0;
    }
     
    #footer {
    clearboth;
    bottom0px;
    left0;
    width100%;
    height78px;
    background:#6C8CD5/*#A1C4E8*/;
    border-top1px solid #93A1CC;
    color#fef9ee;
    overflow:hidden;
    }
    #footerContent {padding:10px;}
    #footerContent h5 {margin:0; padding:5px 0; color: #fef9ee;}
    #footerContent p {padding:5px 0; margin:0;}
     
    #main {
    margin0;
    padding0;
    }
    /* \*/
    html #footer {
    positionabsolute;
    }
    html #main {
    padding-bottom100px;
    }
    /* \*/
    head:first-child+body div#footer {
    positionabsolute;
    z-index:0;
    }
    head:first-child+body div#main {
    padding-bottom100px;
    }
     
    }
     
    @
    media all and (min-width:0px) {
    head~body {height:100%;}
    }

    </
    style>

    </
    head>
     
    <
    body>

    <!-- 
    wrapper begin -->
    <
    div id="wrapper">
            
        <
    div id="header">
        
            <
    div id="headercontent">
            
    HEADER
            
    </div><!-- id="headercontent" -->
        
        </
    div><!-- header ends -->
     
        <!-- 
    main begin -->
        <
    div id="main">
        
            <
    div id="content01"><!-- content01 begin -->
            
            <
    p>    
            
    CONTENT :
            
            <
    br /><br />
            
            
    Rellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestasVestibulum tortor quamfeugiat vitaeultricies egettempor sit ametante.
            
            </
    p>
            
            </
    div><!-- content01 end -->
            
            <!-- 
    clear begin -->
            <
    div class="clear">
            </
    div>
            <!-- 
    clear end -->
                
        </
    div>
        <!-- 
    main end -->
     
        <!-- 
    footer begin-->
        <
    div id="footer">    
        
            <!-- 
    footerContent begin -->
            <
    div id="footerContent">
            
                
    FOOTER
            
            
    </div>
            <!-- 
    footerContent end -->
                    
        </
    div>
        <!-- 
    footer end -->
     
    </
    div>
    <!-- 
    wrapper end -->

    </
    body>

    </
    html
    Last edited by foreverforever; February 10th, 2013 at 05:42 AM.
  2. #2
  3. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    5
    I did something similar to what you are trying
    to do. The trick that I used was to resize two
    of the three fixed divisions whenever the page
    size changed.

    This is the CSS code:

    Code:
    html, body {
      margin: 0;
      padding: 0;
    }
    
    #topofpage {
      background-color:#ffeedd;
      position:fixed;
      left:0px;
      top:0px;
      height:90px;
      width:100%;
      z-index:5;
    }
    
    #leftofpage {
      background-color:#ddffdd;
      position:fixed;
      overflow-y:scroll;
      left:0px;
      top:90px;
      width:135px;
      height:400px;
    }
    
    #rightofpage {
      background-color:#ffeedd;
      position:fixed;
      overflow-y:scroll;
      overflow-x:scroll;
      left:135px;
      height:400px;
      top:90px;
    }
    And this is the js/jquery code:

    Code:
    /* Function setPage() adjusts the height and width
     * of rightofpage and the height of lefttofpage.
     */
    function setPage()
    {
      var winH = $(window).height();
      var winW = $(window).width();
      $('#rightofpage').css('height', winH-90);
      $('#rightofpage').css('width', winW-135);
      $('#leftofpage').css('height', winH-90);
    }
    
    
    /* Function resize() waits for 200 ms before
     * executing setPage. Multiple window resize  
     * events that occur within this time peroid 
     * will only trigger the setPage function once.
     */  
    $(window).resize(function() 
    {
      if(this.resizeTO) clearTimeout(this.resizeTO);
      this.resizeTO = setTimeout(function() 
      {
        $(this).trigger('resizeEnd');
      }, 200);
    });
    $(window).bind('resizeEnd', function() {
      setPage();
    });
    
    /* Initial page resizing. */
    $(function(){
      setPage();  
    });

    Comments on this post

    • foreverforever agrees
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    57
    Rep Power
    5
    Thanks richpri but I don't think that this is what I need. The problem isn't the size of the window but adjusting the content div to best display the content, whether there's a lot of content or very little. Some users of my site will upload a lot of content, whereas others may upload very little, and I want the layout to look good either way.

    Or have I missed the point ? Quite possible as I seem to be really stumbling here.

    Originally Posted by richpri
    I did something similar to what you are trying
    to do. The trick that I used was to resize two
    of the three fixed divisions whenever the page
    size changed.
  6. #4
  7. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    5
    Lets talk about my setup's content division which sits inside of the rightofpage division.

    When there is a lot of stuff in the content division, it scrolls within the rightofpage division which seems to me just a good as scrolling within the browser window. (Better in fact because the header stays in place.)

    When there is very little stuff in in the content division, it is smaller but since the background-color is specified for the the rightofpage division the viewer cannot see this. It looks like it still fills the whole screen (except for the header and the sidebar in leftofpage).

    I don't use a footer, but you cold put one in a static bottomofpage division and it too would stay on the screen when the content division scrolled. Of course you would have to adjust the formulas in setPage().

    If you had a 90px header like I do and added a 40px footer then the winH-90 term would have to be changed to winH-130.

    Hope this helps!
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    57
    Rep Power
    5
    Hi richpri,

    Isn't that essentially the same as setting overflow-y to scroll in my content div in the "absolute" example ?

    I appreciate that you want your header to stay in place, but I want the whole page to scroll rather than just the content div.

    If needs be, I could go down the scrolling overflow-y road but it wouldn't be my ideal solution. Any other ideas ?
  10. #6
  11. Old Fart
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Location
    Chicago
    Posts
    108
    Rep Power
    5
    Sorry, nothing else occurs to me.
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    57
    Rep Power
    5
    OK, well thanks all the same - hopefully someone else will come up with what I need.

    Originally Posted by richpri
    Sorry, nothing else occurs to me.
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,131
    Rep Power
    4304
    foreverforever, there is no good way to do what you're trying to do. You could try using "display:table" (for #wrapper), "display:table-row" (for #header, #main, #footer), and "display:table-cell" (for #headercontent, #content01, #footerContent). Since you already have separate wrapper <div>s for the header and footer, you may not need to add any additional markup.

    Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?

    Originally Posted by richpri
    (Better in fact because the header stays in place.)
    And worse because when someone scrolls via the page up/down keys or by clicking in the scrollbar's gutter, the page will scroll by the viewport's height but the top of that will be covered by the fixed-positioned header.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2010
    Posts
    57
    Rep Power
    5
    Originally Posted by Kravvitz
    foreverforever, there is no good way to do what you're trying to do.
    It may not be perfect but I have what seems to be a working solution :

    This is what I've done :

    1 - Set the content div (#content01) as position:relative;

    2 - Added a one-cell table within the content div, and given it a class of "contentbox".
    Code:
    <table class="contentbox"><tr><td valign="top">
    CONTENT :
    		
    <br /><br />
    				
    Rellentesque habitant morbi tristique senectus et netus et malesuada 
    fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, 
    ultricies eget, tempor sit amet, ante. 
    		
    </td></tr></table>
    3 - Shifted some css from "content01" to "contentbox", so it now looks like this -
    Code:
    #content01 { /* NB - RELATIVE */
    	position:relative;
    	top:30px;
    	margin-right:30px;
    	margin-bottom:40px;
    	margin-left:30px;
    }
     
    .contentbox {
    	width:100%;
    	height:300px;
    	padding-top:20px;
    	padding-right:20px;
    	padding-bottom:20px;
    	padding-left:20px;
    	background-color: #ffffff;
    	border: 2px solid #93A1CC;
    	border-radius:8px;
    	-moz-box-shadow: 3px 3px 5px 0px #93A1CC;
    	-webkit-box-shadow: 3px 3px 5px 0px #93A1CC;
    	box-shadow: 3px 3px 5px 0px #93A1CC;
    }
    4 - Moved all content into the table.

    5 - Modified richpri's jQuery code to adjust all elements with a class of "contentbox" - ie the new table.
    Code:
    $('.contentbox').css('height', winH-320);
    I appreciate that using a table in this way does run slightly counter to the concept of css but it seems to work. Would appreciate hearing if there's any reason why I shouldn't do it this way.

    Originally Posted by Kravvitz
    Out of curiosity, is there a particular reason why your code has IE5/Mac hacks in it? When was the last time you tested in IE5/Mac?
    To be honest, it's a template that I found on the web - I don't actually understand the IE5/Mac hacks - once I have a better grip of design, I hope to tidy it up.

IMN logo majestic logo threadwatch logo seochat tools logo