web-dev-qa-db-ja.com

CSS Divの幅のパーセンテージとレイアウトを壊さないパディング

これには簡単な修正方法があるかもしれませんが、今では長い間私を悩ませてきました...

状況を説明させてください。ページ内のすべてのコンテンツ（ヘッダーとフッターも含む）を保持するID 'container'を持つdivがあり、すべてをインラインに保ち、たった1つの単純な 'margin：0 auto;'を実行できます。倍数ではなく。 #containerの幅を80％に設定しているとしましょう。今、同じ幅（80％）で別のdivを内部に配置し、10pxのパディングで 'header'の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>

永遠に私を悩ませてきたこの問題で誰かが私を助けてくれますか？

csspaddingfluid-layout
54
Kyle Ross

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

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

#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;
}

box-sizing works の仕組みを説明する投稿があります。

90
Pat

CSS calc（） 関数を使用して、コンテナの幅の割合からパディングの幅を引くこともできます。

例：

width: calc((100%) - (32px))

減算された幅は、半分だけでなく、パディングの合計と等しくなるようにしてください。内側のdivの両側に16pxを埋め込む場合、下の例が達成したいものであると仮定して、最終幅から32pxを差し引く必要があります。

.outer {
  width: 200px;
  height: 120px;
  background-color: black;
}

.inner {
  height: 40px;
  top: 30px;
  position: relative;
  padding: 16px;
  background-color: teal;
}

#inner-1 {
  width: 100%;
}

#inner-2 {
  width: calc((100%) - (32px));
}
<div class="outer" id="outer-1">
  <div class="inner" id="inner-1"> width of 100% </div>
</div>

<br>
<br>

<div class="outer" id="outer-2">
  <div class="inner" id="inner-2"> width of 100% - 16px </div>
</div>
4
Ian Gradert

positionからheaderを削除して、overflowをcontainerに追加してみてください。

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