Question

我正在尝试使用一个布局，其中左列是固定宽度和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>

Answer 1

解决问题的最简单方法是将padding-bottom添加到与页脚高度匹配的100％高度div中，这样底部的内容不会被页脚覆盖

Answer 2

不要绝对定位您的列和页脚，而是让它们静态显示（默认定位）。这样他们就会互相攻击。然后使用CSS获取粘性页脚。可以在此处找到一个很好的示例： Ryan Fait's Sticky Footer Page 。最后，使用JQuery使列与内容区域的高度相等： See this site 。

静态和流体柱，浏览器高度为100％

2 个答案: