0

私はいくつかの異なることを試みてきましたが、このフッターを下に貼り付ける方法がわかりません。ネストされたdivが相互に多数存在するため、問題が発生します。私が達成したいのは、border-rightラッパーとborder-leftラッパーをページの下部に配置してフッターを囲むことですが、フッターはページの下部に配置する必要があります。

ネストされたすべてのdivを少し説明します。ボディにはメインのタイリング背景画像が適用され、＃backgroundには透明なオーバーレイがあり、エッジに向かってフェードアウトします。border-rightおよびborder-leftdivには、コンテンツdivの境界として機能する背景としての繰り返し画像があります。

そして、フッターdivは完全に分離されている必要がありますが、それを作成すると、左の境界線の幅ではなくウィンドウの幅の中央に留まるため、画面が縮小すると不安定に見えます。

基本的なページ構造は次のとおりです。また、jsfiddleを投稿しました：http：//jsfiddle.net/cutcopypaste/zry4T/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>

        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
    </div>
        <div id="footer">
            <p>Footer</p>
        </div>
</div>
</body>
4

2 に答える 2

0

私の解決策: http://jsfiddle.net/zry4T/15/

<body>
<div id="background">
    <div id="container">

        <div id="header">
            <div id="logo"></div>
            <div id="menu">
                <p>Menu</p>
            </div>
        </div>
        <div id="wrapper">
        <div id="border-left">
            <div id="border-right">

                <div id="content">

                    <p>Page Content</p>     
                </div>
            </div>
        </div>
        <div id="push"></div>
    </div>

</div>    <div id="footer">
            <p>Footer</p>
    </div>
</div>
</body>

<style type="text/css">
*
{
 margin: 0;
 padding: 0;
}
html, body
{
 height: 100%;
 line-height: 1.2;
}

body
{
 background: #000 url(../images/bg-pattern.png) center top repeat;
}

#background
{
 background: url(../images/overlay.png) center top repeat-y;
 min-width: 960px;
 padding-left: 1px;
}

#container
{
 background: red center top no-repeat;
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -60px;   
 overflow: hidden;
 width: 960px;
 z-index: 10;
}

#header
{
}
#logo
{
 height: 114px;
 width: 960px;
}
#logo a
{
 border: none;
 display: block;
 height: 90px;
 margin: 60px auto;
 width: 640px;
}

#menu
{
 background-color: orange;
}

#border-left
{
 background: blue url(../images/border-left.png) repeat-y 1px -5px;
 height: 100%;
 margin: -4px auto 0;
 width: 912px;
}
#border-right
{
 background: blue url(../images/border-right.png) repeat-y 857px -5px;
 height: 100%;
}
#content
{
 background: yellow url(../images/stripes.gif) center top repeat;
 margin: 35px auto 0;
 min-height: 100px;
 padding: 8px 33px 110px;
 width: 738px;
 z-index: 10;
}

#push {height: 60px;}

#wrapper{
width:960px;
margin:o auto;
}
#footer
{
 background: green url(../images/footergradient.png) repeat-x;

 height: 60px;
 margin: 0 auto;
clear:both;
 text-align: center;
 width: 808px;
}
</style>
于 2011-02-12T07:36:41.663 に答える
0

これはあなたを正しい方向に向けていますか？

http://jsfiddle.net/zry4T/28/

私は基本的にフッターをラッパーの一番下に絶対に配置し、ラッパーが少なくともコンテンツと同じ高さであることを確認しました。

編集：更新されたフィドル

于 2011-12-17T00:25:03.780 に答える