0

フッターを絶対に配置できないという問題があります。私はそれを配置し、IEでは5pxのマージンのように表示され、Firefoxでは多くのマージンがあり、Chromeでは完全に表示されます...なぜこれが起こるのか本当にわかりません...ここにHTMLがあります：

<p>In posuere dapibus mauris, et elementum magna rhoncus quis. Morbi ultricies malesuada magna, vel porta risus rhoncus a. Morbi aliquam facilisis dolor, scelerisque porttitor dui auctor id.</p> 
            </div><!-- /info -->
          </div><!-- /info-design -->
        </div><!-- /content -->
        <div id="info-footer"></div><!-- /info-footer -->
        <div id="footer">

        </div><!-- /footer -->
    </div><!-- /wrapper -->

そしてCSS：

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;}

#content{margin:0 auto;width:1000px;}

#info-design{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -opera-border-radius: 0 0 5px 5px;
    -khtml-border-radius: 0 0 5px 5px;
    filter:alpha(opacity=80);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    opacity: .8;
    -moz-opacity: .8;
    -khtml-opacity: .8;
    background:#FFF;
    border:1px double #000;
    margin:0 0 10px 0;
    position:absolute;
    padding:10px 3px 3px 10px;
    width:985px;
    z-index:100;
}

#info{z-index:101;}

#info-footer{background:url(../img/BaseSite.gif) no-repeat center bottom;height:158px;position:absolute;bottom:0px;z-index:99;}

#footer{
    background:url('../img/cesped.jpg') repeat-x center bottom;
    height:176px;
    position:absolute;
    width:100%;
    z-index:98;
    bottom:0px;
}

画像「cesped.jpg」をbottom:0px;に表示したい。しかし、それはそこにとどまりません=/何かを見逃したり、持ってはいけないものを追加したりしましたか?

編集

基本的に、フッターを「コンテンツ」divの一番下に配置したいのですが、固定幅であるため、そのdiv内に配置することはできず、この画像をブラウザ全体に繰り返しxさせたいです（したがって、配置されますコンテンツの後、 width="100%" を持つラッパーの前; ラッパーの位置を絶対的および相対的にしようとしましたが、それでも一番下に配置されません...そして、「自然に」押し下げられるようにしました「しかし、そうはなりません...

これがどのように見えるべきか（そしてChromeでのように見える）は次のとおりです：（ソース：flickr.com）代替テキスト

次に、IE と Firefox を示します。

代替テキスト
(ソース: flickr.com )

代替テキスト
(ソース: flickr.com )

編集 2

問題が見つかりました。何らかの理由で #wrapper がブラウザの高さ全体をカバーするように拡張されていませんが、その一部しかカバーしていません。追加した：

#wrapper{font-size:1.2em;font-family:Helvetica, Arial, sans-serif;width:100%;min-height:100%;}

#content{margin:0 auto;width:1000px;}
4

3 に答える 3

2

フッターを配置したいのは...何ですか？私は「」の絶対的な底にあると思い<div id="wrapper">ますか？position: relative;次に、ラッパーをまたはのいずれかにする必要がありますposition: absolute;。絶対配置要素は、または位置を持つ最も近い親に向けられます。あなたの CSS から、または.relativefixedabsolute<html><body>

また、要素info-footerとfooter要素の両方が、互いの上に重ねられた一番下に配置されます。それは望ましい効果ですか？

たぶん、あなたがそれをどのように見せたいか、そしてそれが今どのように見えるかのモックアップを投稿することができますか?

コンテンツがフッターを「自然に」押し下げるのではなく、このようにする必要があるのでしょうか?

編集：正しく理解できたかどうかはわかりませんがrepeating、の下部にある単純な背景画像は<body>どうですか？

body { background: url(image.jpg) repeat-x center bottom; }
于 2009-07-06T04:24:02.343 に答える
0

#wrapperにmargin-bottom：50pxを追加しても機能しますか？

于 2009-07-07T14:28:04.110 に答える
0

編集2に応じて、position:absolute要素をドキュメントフローから削除します。したがって、要素の高さは親に適用されません（または、親は要素に対応するために成長しません）。そのため、高さを追加すると機能します。ただし、絶対に配置された要素の高さが設定した高さよりも高くなると、同じことが起こります。

上記では、div#info-design（私が言えることから）絶対に配置する必要はないように見えます。その宣言を削除しmargin-bottom、の高さに等しくしてdiv#footer、に任意の高さを設定することに依存せずに同じ効果を達成することができdiv#wrapperます。

于 2009-07-07T14:19:44.930 に答える