是否可以將元素或僞元素拉伸到水平頁面邊界而不使用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 */ 


}