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属性添加到该容器中。这样您就可以设置错误消息的样式，而不必担心定位元素本身可能产生的样式问题（如出血的背景颜色，填充或溢出问题）。

<强> HTML

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

Demo

Answer 3

确保正文具有0填充和边距。

内部任何div都应占用可用空间。