•  04-01-2021
  •  | 
  •  

Question

I know this has been asked a million times, but I haven't had much luck making it work.I'm working on a Posterous layout, and I'm trying to get my may content to flow to the bottom.

Here is a link to the layout so far

You can see that the content is held within center_col, so I basically need this column to stretch to the bottom of the page/window regardless of how much content is in there.

Here is the current HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>{Title}</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
        <style type="text/css"> 
            * {margin:0;padding:0}/* mac hide \*/
            html { height: 100%;}
            * html #wrap {height: 100%;}/* end hide */
            body {  
                background: #FFFFFF;   
                color: #fff;  
                height:100%;    
                min-width:800px;}
            #inner {
                position:relative;
                width:100%
            }
            #wrap {    
                min-height: 100%;    
                margin-left:50%;    
                position:relative;    
                background:#F9F9F9;    
                color:#000;    
                z-index:1
            } 
            #center_col {    
                float: left;    
                width: 800px;
                height: auto;
                margin-left:-380px;/* drag it central on the page*/    
                position:relative;    
                display:inline;/* ie double margin bug*/    
                background:#FFFFFF;
            }
            #sidebar {                            
                width:204px;
                height: 100%;
                padding-right:26px;     
                float:left;     
                min-height:234px;     
                position:relative;     
                background: #FFFFFF; 
            } 
            #content {                             
                width:570px;
                height: 100%;
                min-height: 100%;    
                position:relative;     
                float:left;     
                background: #F9F9F9 url('http://www.rockettree.com/images/bg-content.png') left top repeat-y;   
                padding-top:21px;     
                padding-bottom:48px; 
            }
            .postunit {                         
                width: 500px; 
                margin-left: 30px; 
                padding: 10px 5px 20px 5px;
                background: #FFFFFF;
                border: 1px solid #F9F9F9;
             }
            .sidebar {                        
                border: 1px solid #000000;
                background-color: #FFFFFF; 
                margin-top: 50px;
                padding-left: 10px;
                float: left; 
                height: auto;
                width:200px;
                -moz-border-radius: 10px;
                border-radius: 10px;
            }
            p{
                padding:5px;
                margin-bottom:1em;
            }
        </style> 
        <!--[if IE]><style type="text/css">body {width:expression( documentElement.clientWidth < 802 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 802 ? "802" : "auto") : "802px") : "auto" );}</style><![endif]-->  
    </head> 
    <body> 
        <div id="wrap">     
            <div id="inner">        
                <div id="center_col">             
                    <div id="sidebar">                
                        <div class="header">
                            <h1>{Title}</h1>
                            <p>{Description}</p>
                        </div>
                        {block:ListSidebar}
                        <div class="profile">
                            <a href="{ProfileLink}">
                                <img src="{PortraitURL-45}" width='75' height='75'>
                            </a>
                            <p>{Profile}</p>
                        </div>
                        {/block:ListSidebar}
                    </div>
                    <div id="content">

                        <div class="posts">
                            {block:Posts}

                            <div id="postunit_{PostID}" class="postunit">
                                {block:EditBox/}

                                <div class="post">                        
                                    <h3><a class="posttitle" href="{Permalink}">{Title}</a></h3>
                                    <a class="button" href="{Permalink}">Posted {TimeAgo}</a>
                                    {Body}
                                </div>
                                {block:Responses}
                                {block:ResponsesList}
                                {/block:ResponsesList}
                                {block:Sharing}
                                {block:Tweet /}&nbsp;{block:FbLike /}
                                {/block:Sharing}
                                <div class="postresponses">
                                    <a class="button" href="#">{ResponseCount} Response{ResponseCountPluralized}</a>
                                </div>
                                {block:ResponsesShow}
                                {Responses}  
                                {ResponseForm}  
                                {/block:ResponsesShow} 
                                {/block:Responses}
                            </div>

                            {/block:Posts}
                        </div>

                        {block:Pagination/}

                    </div>         
                </div>     
            </div>
        </div> 
    </body> 
</html>
Was it helpful?

Solution

Set the height of the containing elements of the #center_col div to 100%. I tested this and it worked!

OTHER TIPS

If you are using jQuery:

<script type="text/javascript">
    $(function(){
        var height = $("#content").height();
        $("#sidebar").height(height); 
    });
</script>

where < div id="content" > is the div with the size you want to replicate in < div id="sidebar" >

If your layout is going to stay this simple, I say just fake it with a nice little background image =)

If that won't do, I think JS is your only way to go. e.g.

window.addEventListener('load',fit,false);
window.addEventListener('resize',fit,false);
function fit(){
    var myHeight;
    if( typeof( window.innerWidth ) == 'number' ) {
        //Non-IE
        myHeight = window.innerHeight;
    } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }
    document.getElementById('content').style.height=myHeight + 'px';
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top