2

フッターの幅をページの 100% に広げたい。ただし、流動的なレイアウトを作成できるように、HTML ドキュメントの本文に min-width:1000px と max-width:1000px を定義しました。max/min-width:100% に設定してフッターを作成すると、ページ全体にまたがらず、本文に設定された最小/最大幅によって制限されます。フッターの幅を 100% に設定し、最小/最大幅を本体で 1000px に定義する方法はありますか? HTML と CSS のコードは次のとおりです。

HTML:

<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>

<header>
Some Text
</header>
<section class="mainSection">
    <article class="mainArticle">
            <header>
                <h4>Some Text</h4>
            </header>
            <p>
                    Some text
            </p>
    </article>
</section>
<footer>
    <section class="footerSection">
        <article class="footerArticle">
            <p>Some Text</p>
        </article>
    </section>
</footer>

CSS:

body{
    margin:0px auto;
    min-width:1000px;
    max-width:1000px;
    height:auto;
    background-color: #97cdcd;
    background-size: 5px 5px;
    background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
}
body > footer{
    margin:0px;
    padding:0px;
    min-width:100%;
    max-width:100%;
    background:#ffffff;
    height:auto;
}
4

4 に答える 4

2

本文の最大幅と最小幅を定義する代わりに、コンテンツ div を作成してメイン コンテンツ領域をラップし、コンテンツ div のその領域に最大スタイルと最小スタイルを適用します。

フッターは本文の子であり、通常のフローの外側ではないため、ボックス モデルにより、常に本文の幅によって制限されます。ボックス モデルとフローのルールを念頭に置いている限り、これは実際には非常に便利です。したがって、フッターがこれらの属性によって制限されない場合、それらの属性はフッターの親ではなく兄弟に適用する必要があります。

たとえば、これらのルールも適用するsection必要がない場合は、要素に最大/最小を適用するだけです。headerそれ以外の場合は、次のようにします。

<!doctype html>
<html lang="en">
<head>
Some Text
</head>
<body>
<div class="content-wrapper">
<header>
Some Text
</header>
<section class="mainSection">
    <article class="mainArticle">
            <header>
                <h4>Some Text</h4>
            </header>
            <p>
                    Some text
            </p>
    </article>
</section>
</div>
<footer>
    <section class="footerSection">
        <article class="footerArticle">
            <p>Some Text</p>
        </article>
    </section>
</footer>

</body>

CSS: 

    .content-wrapper{
        margin:0px auto;
        min-width:1000px;
        max-width:1000px;
        height:auto;
        background-color: #97cdcd;
        background-size: 5px 5px;
        background-image: linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
        background-image: -webkit-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
        background-image: -moz-linear-gradient(rgba(189, 204, 211, .50) 50%, transparent 50%, transparent);
    }
    body > footer{
        margin:0px;
        padding:0px;
        min-width:100%;
        max-width:100%;
        background:#ffffff;
        height:auto;
    }

明らかに、コンテンツ ラッパー div の代わりにボディ全体に適用したいスタイルのいくつかがあります。これは単なる例です。

于 2012-12-27T17:13:54.587 に答える
1

単純に:いいえ- フッターは本文の子であり、幅のパーセンテージ プロパティは親に対して相対的です。

この場合、body 要素 (親) を固定幅に設定しているため、子は流動的ではありません。代わりに、幅を100% にすることで、body 要素の幅を 100%、つまり 1000px にします。

本文の最大幅と最小幅のプロパティを保持するつもりの場合、これを修正する唯一の方法は、フッターを完全に配置することです。これは理想的ではありません。max プロパティと min プロパティを削除して、まったく別のアプローチを試すことをお勧めします。

于 2012-12-27T17:14:42.977 に答える
0

フーラーはボディ内部にあるため、ボディサイズに制限があります。

body 内にラッパー div を作成できます。ラッパー div 内にヘッダーと mainSection を含め、1000px に、フッター div を 100% にします。

于 2012-12-27T17:16:34.073 に答える
0

短い答え: いいえ

フッターに指定した 100% 幅は、コンテナーに指定した 1000px の 100% です。問題の解決策は、<header>および<section>タグをコンテナ タグ内に配置し、その上に 1000px の制限を設定することです。

于 2012-12-27T17:15:58.133 に答える