有些时候我们需要在容器中添加一个固定宽度和对齐中心的全宽容器(宽度超过100%)。

下面的代码有助于实现布局。

演示：

HTML

 <div class="container" style="width: 750px; margin: 0 auto;">

<div class="row-full">
 --- Full width container ---
</div>

</div>

CSS

 .row-full{
 width: 100vw;
 position: relative;
 margin-left: -50vw;
 height: 100px;
 margin-top: 100px;
 left: 50%;
}

它的工作方式：

这里使用了Css单位(视区宽度)，上面的IE9支持vwvh css单元。