54

これには簡単な修正があるかもしれませんが、それは私を長年悩ませてきました...

状況を説明しましょう。ページ内のすべてのコンテンツ (ヘッダーとフッターも含む) を保持する ID 'container' を持つ div があり、すべてをインラインで保持し、単純な 'margin:0 auto;' を 1 つだけ実行できます。倍数の代わりに。#container の幅を 80% に設定したとしましょう。ここで、同じ幅 (80%) の別の div を内部に配置し、10 ピクセルのパディングで「ヘッダー」の ID を与えると、ページがパディング量を追加するため、レイアウトは (いわば) 「壊れる」でしょう。幅。では、#header div のパーセンテージを下げるなどの方法を使用せずに、範囲内にとどめるにはどうすればよいでしょうか? 基本的に、私はそれを流動的にしたいと思っています。

ここに、私が話していることのアイデアを提供するためのコード例をいくつか示します...

CSS

#container {
    position:relative;
    width:80%;
    height:auto;
}
#header {
    position:relative;
    width:80%;
    height:50px;
    padding:10px;
}

HTML

<div id="container">
    <div id="header">Header contents</div>
</div>

私を永遠に悩ませてきたこの問題を誰か助けてくれませんか?

4

3 に答える 3

95

#header10 ピクセルのパディングを使用してコンテナーと同じ幅にしたい場合は、幅の宣言を省略できます。これにより、親の幅全体が暗黙的に占有されます (div はデフォルトでブロック レベルの要素であるため)。

次に、幅を定義していないため、要素の幅に追加するのではなく、要素内に 10 ピクセルのパディングが適切に適用されます。

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

ここで実際の動作を見ることができます。

パーセンテージの幅とピクセルのパディング/マージンを使用する際の鍵は、同じ要素でそれらを定義しないことです (サイズを正確に制御したい場合)。親にパーセンテージ幅を適用してから、display: block幅が設定されていない子にピクセルのパディング/マージンを適用します。

アップデート

これに対処するための別のオプションは、box-sizing CSS ルールを使用することです。

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

これは、ボックスのサイズ変更の仕組みについて説明している投稿です。

于 2010-08-22T13:01:00.233 に答える
2

positionfromを削除してtoheaderに追加してみてください:overflowcontainer

#container {
    position:relative;
    width:80%;
    height:auto;
    overflow:auto;
}
#header {
    width:80%;
    height:50px;
    padding:10px;
}
于 2010-08-21T20:42:54.513 に答える