CSS растянуть до доступной ширины

Question

Как сделать элемент уровня блока, например, div, растянуть до доступной ширины?

Я знаю, что это может показаться вопросом с очевидным ответом, но это немного сложнее, чем кажется, взгляните на эту скрипку:

http://jsfiddle.net/spryno724/pZKgv/

CSS устанавливает левое и правое поле для содержания div до 20% с каждой стороны. Установка свойства width приводит к тому, что он растягивается на 100% от оригинального свободного пространства, в результате чего оно выпадает за пределы экрана при добавлении полей по 20% с каждой стороны.

Как это можно исправить, чтобы по-прежнему существовало 20% полей, но div растягивается, чтобы заполнить оставшееся пространство между ними?

Answer 1

Вот что у вас было:

.error {
  border: 1px solid black;
  display: inline-block;
  margin-left: 20%;
  margin-right: 20%;
  position: fixed;
  top: 0;
  width: 100%;
}​

Попробуйте это:

.error {
  border: 1px solid black;
  margin-left: 20%;
  margin-right: 20%;
  top: 0;
}​

Answer 2

Самый чистый способ, как я вижу, вы идете в этом направлении, кроме упомянутого исправления (установка ширины на 60%), заключается в том, чтобы заключить эту ошибку div в контейнер и добавить к ней свойство position:fixed.Таким образом, вы можете стилизовать свое сообщение об ошибке и не беспокоиться о проблемах стиля, которые могут возникнуть из-за позиционирования самого элемента (например, проблемы с цветом фона, заполнением или переполнением).*

<div class="fixed">
    <div class="error">Error!!!</div>
</div>

CSS

.error {
  border: 1px solid black;
  margin-left: 20%;
  margin-right: 20%;
}


.fixed {
    position: fixed;
    top: 0;
    left:0;
    right:0;
}

Демо

Answer 3

Убедитесь, что тело имеет 0 отступы и поля.

Любой div внутри должен занимать каждый бит доступного пространства.