Отображать ширину 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

Ответ 1

Вы можете использовать следующий CSS для достижения желаемого результата:

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

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

Ответ 2

Вы можете использовать функцию 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;
}

Ответ 3

Иногда лучше сделать противоположное и вместо этого отложить родительский div дополнение:

LIVE DEMO

Что я сделал, это изменить CSS #page на:

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

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

Затем удалите margin из #margin

Примечание. Это также добавляет 3% к верхнему и нижнему (так что 6% к высоте), что делает его чуть выше 300 пикселей - так что если вам нужно ровно 300 пикселей, вы можете сделать что-то вроде padding:10px 3%; и изменить height:280px;, чтобы добавить до 300px снова.

Ответ 4

Только для пользователей LESS:

Использование хорошего решения Vukašin Manojlović не работает из коробки, потому что LESS выполняет + или - операции во время компиляции LESS. Одно из решений - выйти из LESS, чтобы он не выполнял операцию.

Отключить LESS-CSS Overwriting calc()

@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);

или может использовать mixin как:

.fullWidthMinusMarginPaddingMixin(@marginSize,@paddingSize) {
  @minusValue: (@[email protected])*2;
  padding: @paddingSize;
  margin: @marginSize;
  width: calc(~"100% - "@minusValue);
  width: -moz-calc(~"100% - "@minusValue);
  width: -webkit-calc(~"100% - "@minusValue);
  width: -o-calc(~"100% - "@minusValue);
}

Ответ 5

Правильный способ достижения этого по стандарту:

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