2

現在、私は自分のためにウェブサイトに取り組んでいます。私は、フッターが常に下部に貼り付けられるヘッダーコンテンツフッターのデザインを採用することにしました。したがって、位置が相対で、ヘッダー（#top）、コンテンツ（#middle）、およびフッター（#bottom）を含むラッパーを設定しました。下部の位置：絶対、上部：0。

また、高さを設定しました。HTMLと本文には100％、＃middleには適切なパディングボトムを設定して、フッターが#middleと重ならないようにします。

ここで簡略化されたサンプルバージョンを見つけてください：http ：//www.webdevout.net/test？0w

問題のCSSは次のとおりです。

* {
    padding: 0;
    margin: 0;
}

html, body {height: 100%}

#wrapper {
    position: relative;
    background-color: #ccc;
    min-height: 100%; 
}

#middle {
    background-color: #900;
    padding-bottom: 200px;
}

#top, #bottom {
    width: 100%;
    height: 200px;
    background-color: #bb5;
}

#bottom {position: absolute; bottom: 0;}

ここに私の問題があります：ボックスモデルの私の理解は、＃middleのpadding-bottomの代わりにmargin-bottomで同じ（フッターのスペースを維持する）を達成できるはずですが、margin-bottomはそうではありません' tに適用されます。min-heightはパディング、ボーダー、マージンを考慮していないことを読みましたが、ここではパディングが考慮され、ボーダーとマージンは考慮されていません。

#middleでpadding-bottomの代わりにmargin-bottomを使用すると、FFとChromeの動作が異なります。Chromeはマージンを無視しますが、FFは#wrapperの下に適用します。私の一般的な考えは、コンテナは、高さ+パディング+境界線+ #middleのマージンを含む、最小の高さでコンテンツの合計サイズに拡大する必要があるというものでしたが、明らかに、全体のサイズは＃top +高さ＃に拡大します。ミドル+#middleのパディング。

正しい動作とは何か、フッターのスペースを維持するためにパディングとマージンを交換できないのはなぜかと思います。

説明をいただければ幸いですが、参考になる情報源へのリンクもありがたいです。これが別の投稿と重複する場合は申し訳ありませんが、私の特別な問題に適合するものは（ここでもGoogle経由でも）見つかりませんでした。

ありがとうございました！

4

1 に答える 1

0

私はあなたが直面しているのと同じ問題に直面していました。

このコードを使用する必要があります。

    ＃真ん中 {
        表示: 表;
        マージン: 2% 自動;
        幅: 100%;
    }

ディスプレイの使用：テーブルは、上下からマージンを設定するのに役立ちます。

于 2012-12-20T07:26:59.603 に答える