0

我试图有一个布局，其中左列是固定宽度和 100% 高度，右列是 100% 宽度和高度。我还希望页脚粘在底部。

我遇到的问题是，由于列是标题下方浏览器视图高度的 100%，它们在横幅和页脚 div 后面运行。我希望他们停在横幅上。为这些 div 设置样式以实现此目的的最佳方式是什么？

如果在其他地方提出这个问题，任何帮助表示赞赏和抱歉，我找不到我面临的同样问题。

CSS和HTML如下：

@charset "UTF-8";
/* CSS Document */


html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body
{
    margin: 0;
}

/*----- HEADER -----*/

#header
{
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, #BBBBBB 0%, #CCCCCC 100%) repeat scroll 0 0 #455774;
    border-bottom: 1px solid #666666;
    box-shadow: 0 2px 2px #666666;
}

/*----- END HEADER -----*/


/*----- SEARCH -----*/

#searchBox
{
    width: 100%;
    height: 50px;
    background: #EEEEEE;
    border-top: 1px solid #FFFFFF;
}

/*----- END SEARCH -----*/


/*----- APP SECTION -----*/

#appView
{
    width: 100%;
    background: white;
}

    #leftPane, #rightPane
    {
        height: 100%;
        position: absolute;
    }

    #leftPane
    {
        float: left;
        width: 270px;
        background: #FFFFFF;
        border-right: 20px solid #EEEEEE;
    }

        #leftPaneNav
        {
            background-color: #666666;
            float: left;
            height: 100%;
            width: 50px;
        }

        #sidebar
        {
            float: left;
            height: 100%;
            left: 50px;
            margin: 0;
            padding: 0;
            position: absolute;
            right: 0;
            background: #red;
            box-shadow: 0px -5px 5px 0px rgb(136, 136, 136) inset;
        }

    #rightPane
    {
        width: 100%;
        left: 290px;
        background: #FFFFFF;
        box-shadow: 2px 2px 5px 2px rgb(136, 136, 136) inset;
    }

/*----- END APP SECTION -----*/

/*----- BANNER DIV -----*/

#banner
{
    position: absolute;
    bottom: 50px;
    width: 100%;
    height: 50px;
    background: red;
}

/*----- FOOTER -----*/  

#footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: black;
}

HTML
<body>
<div id="header">
</div>
<div id="searchBox">
</div>
<div id="appView">
    <div id="leftPane">
        <div id="leftPaneNav">
        </div>
        <div id="sidebar">
        </div>
    </div>
    <div id="rightPane">
    </div>
</div>
<div id="banner">
</div>

<div id="footer">
</div>
</body>
</html>
4

2 回答 2

0

解决问题的最简单方法是添加padding-bottom与页脚高度匹配的 100% 高度 div，这样底部的东西就不会被页脚覆盖

于 2013-01-27T00:12:42.997 回答
0

与其绝对定位列和页脚，不如让它们静态显示（默认定位）。这样一来，他们就会相互对抗。然后使用 CSS 获得粘性页脚。一个很好的例子可以在这里找到：Ryan Fait 的 Sticky Footer Page。最后，使用 JQuery 使您的列等于内容区域的高度：请参阅此站点。

于 2013-01-27T00:36:07.873 回答