Question

我无法正确获取我的2列布局渲染，并且页脚会粘在页面底部。我遵循了所有通常的建议，但我的专栏似乎扩展到了它的容器div之外，因此将页脚从页面底部推开。

我的最后一次尝试是将列容器显示为表格!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style>
            html, body{
                margin:0;
                height: 100%;
                padding: 0;
                border: 0;
                overflow:inherit; /* triggers 100% height in Opera 9.5 */   
                font-family: proxima-nova, 'Proxima Nova', gotham, 'helvetica neue', helvetica, arial, sans-serif, sans;
            }

            body{  
                background-color: burlywood;
            }

            #wrapper
            {
                background-color: #FFFFFF;
                min-height:100%; /* gives layout 100% height */
                width: 980px;
                margin:0 auto;
                margin-top: -105px; /* must equals the footer's height' */
            }

            * html #wrapper { 
                height:100%; /* IE6 treats height as min-height */
            }

            div.margin{
                width: 920px;  /* + 2*30(the padding) */
                margin-right:auto;
                margin-left:auto;
                padding: 0px 30px 0px 30px;
            }

            div.header{
                height: 60px; 
                background-color:cornflowerblue;
            }

            div.footer{
                position: relative;
                clear:both;
                height: 105px; 
                background-color:#4E8084;
            }

           div.body_content{
                display: table; 
                background-color: red;
                height: 100%;
            }

            div.leftSide{
                width:25%;
                background-color: #F4F4F4;
                display: table-cell; 
            }

            div.rightSide{
                width: 70%;
                padding: 20px;
                background-color: #e8e7e7;
                display: table-cell; 
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <!-- Fixing wrapper div. the height must equal the footer's height-->
            <div style="height: 105px;"></div>

            <div class="header margin">
                Welcome
            </div>
            <div class="body_content" style="clear: both;">
                <div class="leftSide">
                    <h2>Settings</h2>
                    <a href="#" id="personalButton" class="current">Personal</a>
                    <a href="#" id="securityButton">Security</a>
                </div>
                <div class="rightSide">
                    <h3>Title</h3>
                    <a class="m-btn blue-stripe">Save Changes</a>
                </div>
            </div>
        </div><!-- end #wrapper -->
        <div class="footer margin" >
            <span class="footer_links">
                something
            </span>  
        </div>
    </body>
</html>

Answer 1

解决这个问题有点复杂。它可以使用display : table，display : table-row和display : table-cell来解决。当文档完成时，我建议你使用如下所示的jquery。

function resize () { 
       var h = $('#wrapper').outerHeight(true) - $('.header').outerHeight(true);
       $('.body_content').height(h);
}

JSFiddle

2列布局与粘性页脚

1 个答案: