3

我知道这已经被问了一百万次了，但我没有太多的运气让它工作。我正在研究一个海报布局，我试图让我的可能内容流到底部。

这是到目前为止布局的链接

您可以看到内容保存在 center_col 中，所以我基本上需要此列拉伸到页面/窗口的底部，而不管那里有多少内容。

这是当前的 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>
4

3 回答 3

6

将 #center_col div 的包含元素的高度设置为 100%。我对此进行了测试，并且有效！

于 2011-02-26T22:22:53.243 回答
2

如果您使用的是 jQuery：

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

其中 <div id="content" > 是您要在 <div id="sidebar"> 中复制的大小的 div

于 2012-04-10T23:30:21.637 回答
0

如果你的布局要保持这样简单，我说只是用漂亮的小背景图片来伪造它=）

如果那不行，我认为 JS 是你唯一的出路。例如

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';
}
于 2011-02-26T21:50:01.707 回答