web-dev-qa-db-ja.com

div幅を100％マージンで表示します

展開可能なdiv（width: 100%）マージンあり...

ここに私のコードがあります：

<div id="page">
    <div id="margin">
        "some content here"
    </div>
</div>​

そして、ここに私のcssコードがあります：

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: 100%;
  height: 300px;
  margin: 10px;
}​

LIVE DEMO

cssmobilehtml
46
Random78952

次のCSSを使用して、目的の結果を得ることができます。

#page {
   background: red;
   overflow: auto;
}

#margin {
   background: green;
   height: 280px;
   margin: 10px
}
11
Daniel Calliess

calc() css関数を使用できます（ ブラウザサポート ）。

#page {
  background: red;
  float: left;
  width: 100%;
  height: 300px;
}

#margin {
  background: green;
  float: left;
  width: -moz-calc(100% - 10px);
  width: -webkit-calc(100% - 10px);
  width: -o-calc(100% - 10px);
  width: calc(100% - 10px);
  height: 300px;
  margin: 10px;
}​

または、マージンとbox-sizing: border-boxの代わりにパディングを使用してみてください（ ブラウザサポート ）：

#page {
    background: red;
    width: 100%;
    height: 300px;
    padding: 10px;
}

#margin {
    box-sizing: border-box;
    background: green;
    width: 100%;
    height: 300px;
}
69
Vukašin Manojlović

反対のことを行い、代わりに親divのパディングを与える方が良い場合があります。

LIVE DEMO

私がしたことは、#pageのCSSを次のように変更することでした。

#page {
    padding: 3%;
    width: 94%; /* 94% + 3% +3% = 100% */

    /* keep the rest of your css */
    /* ... */
}

次に、#marginからmarginを削除します

注：これにより、上部と下部に3％が追加され（高さは6％になる）、300pxより少し高くなります。したがって、正確に300pxが必要な場合は、padding:10px 3%;などを実行して、height:280px;最大300ピクセルまで追加します。

14
Andy

LESSユーザーのみ：

LESSのコンパイル中にLESSが+または-操作を実行するため、VukašinManojlovićのNiceソリューションをすぐに使用することはできません。 1つの解決策は、操作を実行しないようにLESSをエスケープすることです。

calc（）を上書きするLESS-CSSを無効にする

@someMarginVariable = 15px;

margin: @someMarginVariable;
width: calc(~"100% - "@someMarginVariable*2);
width: -moz-calc(~"100% - "@someMarginVariable*2);
width: -webkit-calc(~"100% - "@someMarginVariable*2);
width: -o-calc(~"100% - "@someMarginVariable*2);

または、次のようなミックスインを使用できます。

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@marginSize+@paddingSize)*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}
4
Sebastien Lorber

可能であれば、代わりに#page要素で、ボックスサイズ変更を伴うパディングを使用してください。

#page {
    padding: 10px;
    box-sizing: border-box;
    background: red;
    float: left;
    width: 100%;
    height: 300px;
}
#margin {
    background: green;
    float: left;
    width: 100%;
    height: 100%;
}
1
Andrew Ost

標準でこれを達成する正しい方法は次のとおりです。

#margin {
   background: green;
   height: 280px;
   margin: 10px;
   width: auto;
   display: block;
}
1
Tolly