Doctypeの問題を手伝ってください

StackOverflow https://stackoverflow.com/questions/4669056

  •  10-10-2019
  •  | 
  •  

質問

すべてのブラウザのページの下部にフッターを固定するのに問題があります。

次のドキュメント構造があります。

<html>
    <head>
    </head>

    <body>
        <div id="wrapper">
            <div id="header">
                <ul>
                    <li>home</li>
                </ul>
            </div>

            <div class="expander"></div>
        </div>

        <div id="footer" class="expander">
        </div>
    </body>
</html>

関連するCSSは次のとおりです。

body
{
 margin: 0;
 height: 100%;
}

#wrapper
{
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -116px; 
}

.expander
{
 height: 116px;
}

#footer
{
 width: 100%;
}

#header ul
{
 list-style: none outside none;
 clear: both;
 margin: 0;
}

#header li
{
 margin: 0;
 margin-right: 20px;
 padding: 0;
 display: inline-block;
 height: 85px;
 padding-top: 20px;
 margin-bottom: -20px;
}

ドキュメントタイプなしで使用すると、ChromeとFirefoxで意図したページが表示されます。ただし、IE8では、リストアイテムタブは別々の行にあります

XHTML Doctypeを追加すると、IE8、Chrome、またはFirefoxのページの下部にフッターが描かれていない場合を除き、ページはIE8で正しくレンダリングします。つまり、フッターはメニューバーの真下にあります。

例Doctype：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

私は何が間違っているのですか？

役に立ちましたか？

解決

でのテスト DOCTYPE コード：

変化：

body
{
 margin: 0;
 height: 100%;
}

に：

html, body
{
 margin: 0;
 height: 100%;
}

私のためにそれを修正します。

他のヒント

フッターをページの下部にとどまる必要があります。

body, html{
    margin:0;
    height:100%;
}

#footer{
    position:absolute;
    bottom:0px;
    width:100%;
}

注：このソリューションは、ラッパーの高さのトリック/問題を避けると考えられています

間違ったDoctypeを使用することに加えて、上で述べたように、Doctypesを変更または削除することは決して選択肢ではありません。基本的に、それはあなたがページを作成するために使用しているブラウザに伝えている一連のルールです。中流または気まぐれにルールを変更することはできません。 Doctypeを変更/削除し、ルールを変更します。

物事の仕組みの参照としてIEを使用しないでください。せいぜい不適切で、それは現代の基準とコンプライアンスにおいて他のすべての後ろに10年以上遅れています。 FFとChromeで動作している場合、マークアップは正しい可能性が最も高くなります。

人生はちょうど電話をかけてきたので、後でもっと情報を提供したいと思っています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top