9

私はこれが過去に何度も尋ねられたことを知っていますが、私の人生の間、私は他の解決策のどれも機能させることができないようです。

私がやろうとしているのは、フッター（ページの幅全体に繰り返される画像）を、自然にブラウザの下部にプッシュするのに十分なコンテンツがない場合に、ブラウザの下部に固定することです。ページとそれを一番下にプッシュするのに十分なコンテンツがあるとき、それはまさにそれをします。例としては、http：//www.themaninblue.com/experiment/footerStickAlt/good_example_short.htmにあるものがあります。これは、私が望んでいることを正確に実行しますが、どちらも動作しません。

私が現在実装しているコードにより、フッターはページの特定のセクションに固定され、その下にテキストが表示されます。sourcectrl.co.ukで見ることができますが、あまり見ることはありません。ここにあなたの閲覧の喜びのためのコードがあります。

html, body {
font: 100% Arial, Helvetica, sans-serif;
height: 100%;
color: #597347;
margin: 0;
padding: 0;
background: #573909;
}

header {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 66px;
    background: url(../images/FillerPage_01.gif) repeat-x left bottom;
}

section {
    width: 940px;
    margin: 0 auto;
    font-size: 1.4em;
    overflow: auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin-bottom: 87px;
    position: relative;
    padding-bottom: 90px;
}

footer {
    display:block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 87px;
    background: url(../images/FillerPage_08.gif) repeat-x left bottom;
}

散らかっていたらごめんなさい！私が正しい方向に向かっているのか、それとも私が得ていない何かがあるのか​​を知りたいのですが？そうそう、私はhtml 5マークアップを使用してこれらすべてを実行しようとしています。これが、＃footerなどがない理由です（これが、どのソリューションも機能しない理由でしょうか？）。

誰かが私に助けやガイダンスを与えることができれば、私はすっごく感謝するでしょう。

4

3 に答える 3

2

あなたが探しているコードはここにあると思います：

http://www.themaninblue.com/writing/perspective/2005/08/29/

私は今これを自分のサイトに実装しましたが、うまく機能しています!

あなたが質問してからしばらく経ちますが、うまくいけばこれが役に立ちます!

于 2011-08-24T01:21:13.807 に答える
1

これは、このようなレイアウトを実現するのに役立ったソースです:

http://www.jaydepro.com/blog/post/Frameless-page-header-and-footer-using-CSS.aspx

于 2010-02-08T13:01:53.047 に答える
0

Main のすべてを Wrapper に配置し、次のコードを使用します。

html, body, form
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -80px;   (-80px will be different for you, usually the same as the footer but negative but mine is different)
}

#footer, .push
{
    height: 60px;   (This is just the height of MY footer, change this to whatever size your footer is)
}
于 2011-08-30T08:34:35.000 に答える