是否可以将元素或伪元素拉伸到水平页面边界而不使用overflow-x：hidden

Question

我通常使用包装容器元素并使用margin: 0 auto;来在两侧获得灵活的扩展边距。在目前的情况下，我想要一个元素伸展到页面的一个边界。我将它的尺寸调整得大一些，宽度大约为999em，然后用overflow-x:hidden剪下overflow。

http://codepen.io/rpkoller/pen/omueg

问题是我已经了解到，该overflow属性是一种越野车的特别是在基于WebKit的浏览器和被完全忽略。但是现在我试着完成这个任务，但是有点失落，没有想法。我在codepen创建了一个示例：

http://codepen.io/rpkoller/pen/fyLrn

我已经用了伪元素版本的代码是：

<section> 
    <div class="wrap"> 
    <div class="box"></div> 
    </div> 
</section> 

的CSS看起来像

.wrap { 
    background-color:red; 
    width: 50rem; 
    margin: 0 auto; 
    height: 40rem; 
} 

section { 
    padding-top:4rem; 
    width:100%; 
    background-color: green; 
    height:40rem; 
} 

.box { 
    height: 3.5rem; 
    line-height: 3.5rem; 
    position:relative; 
    text-align: left; 
    top: 0; 
    left:17.75rem; 
    padding-left: 1rem; 
    background-color:grey; 
    width:15rem; 
    &:after { 
     content: ""; 
     position:absolute; 
     background-color:blue; 
     top:0; 
     bottom:0; 
     width: 35rem; 
     left:100%; 
    } 
} 

但我也可以完全删除:after伪元素，并在.box类上设置更大的宽度。但无论如何，它将无助于将元素跨越到正确的边界。是否有可能让灰色框（没有伪元素）或蓝色框（带有伪元素）总是伸展到页面的右边界？

Answer 1

如果我明白你想要的东西那样：http://jsfiddle.net/xckL79he/4/？

我用第二个div来做这个，因为主要的问题是.box有一个定义的宽度，所以伪元素在宽度上会有相同的：100％; 第一个解决方案与伪，第二个与背景梯度（我认为不太安全）。

这里是小提琴

HTML

<section> 
    <div class="wrap"> 
     <div class="boxContainer"> 
      <div class="box">Plop</div> 
     </div> 
     <br /><br /> 
     <div class="boxContainerGradient"> 
      <div class="box">Plop</div> 
     </div> 
    </div> 
</section> 

CSS

section { 
    padding-top:4rem; 
    width:100%; 
    background-color: green; 
    height:40rem; 
} 

.wrap { 
    background-color:red; 
    width: 50rem; 
    margin: 0 auto; 
    height: 40rem; 
} 

.boxContainer{ 
    position:relative; 
} 
.boxContainer::before { 
     content: ""; 
     position:absolute; 
     background-color:blue; 
     top:0; 
     right:0; 
     width: 50%; 
     height:100%; 
} 
.box{ 
    height: 3.5rem; 
    line-height: 3.5rem; 
    position:relative; 
    text-align: left; 
    margin:auto; 
    width:15rem; 
} 

.boxContainerGradient{ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(left, rgba(0,0,255,0) 0%, rgba(0,0,255,0) 49%, rgba(0,0,255,1) 50%, rgba(0,0,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,255,0)), color-stop(49%,rgba(0,0,255,0)), color-stop(50%,rgba(0,0,255,1)), color-stop(100%,rgba(0,0,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 49%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 49%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 49%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 49%,rgba(0,0,255,1) 50%,rgba(0,0,255,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000ff', endColorstr='#0000ff',GradientType=1); /* IE6-8 */ 


}