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 に答える