-1

http://www.coffeeproteindrink.com/method-athlete/

メイン ラッパーの下の空きスペースを削除しようとしています。Firefox では、約 20 ピクセルの空き領域が表示され、メイン ページに垂直スクロール バーが表示されます。

IE では、スクロール バーのない 115 ピクセルの領域が表示されます。

私の目標は、main_wrap + フッターをページの一番下に揃えることですが、私が試みていることは何も役に立ちません。

#main_wrap {height: 390px;
background: url(images/content_back.png) repeat-y top left; 
margin: 0 0 0 240px;
opacity: .8;
position:absolute;
top:325px;
overflow: hidden;
}

#main
{position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 12px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}

#footer
{ 
width: 680px;
padding: 25px 40px 0 0px;
font-size: 12px;
position: relative;
height: auto;
clear: both;
bottom:50px;}

私が達成しようとしているものの例: http://www.bio-genix.com/

助けてくれてありがとう、ケン

4

1 に答える 1

1

背景画像が画面に引き伸ばされているため、スティッキー フッター テクニックは必要ありませんheight: 100%。

それで、それを見て、bottom: 0に取り組み#main_wrapます。次のパズルは、60px底辺の幻影がどこから来ているのかということでした。最後に、微調整の後、要素overflow: hidden内のマージンとパディングによって開発された追加の高さを非表示にすることが決定されました.#main_wrap

これは最終的に機能したものです（h2修正のための修正の部分）：

#main_wrap {
    position: absolute;
    height: 390px;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
#main {
    padding-bottom: 0;
}
#main_wrap #main h2.section_title {
    margin: 20px 0 40px
}

http://jfcoder.com/test/methodsite.html

于 2012-07-01T00:28:28.640 に答える