CSS - '流血'離開頁面的一個div

Question

如何讓div元素「流血」包含在固定寬度居中的頁面中，位於頁面的左側或右側？

Answer 1

您可以使用float對準一個盒子上的左邊或右邊的容器，它流出來如果它的公司範圍更廣，則相反ntainer。 http://jsfiddle.net/gxG4W/1/

.bleed-leeft { 
float:right; 
width:100%;/* this will keep content within the width of container and give a scrollbar if needed */ 
padding-left:9999px;/* size you want to bleed out for your purpose */ 
} 

您可以父用direction和重置它的孩子，所以它在左邊，而不是右邊流出，如果身體是LTR，反之亦然 http://jsfiddle.net/gxG4W/2/

Answer 2

這是我想出的解決方案。

這個想法是在你想流血的方向上設置負邊距和正邊距。如果您在右側設置負邊距，則您的頁面周圍需要一個容器，設置爲width: 100%;和overflow: hidden;。

DEMO

http://jsfiddle.net/gxG4W/

HTML

<div class="body-hide"> 
    <div class="main-body"> 
     <div class="bleed-left"> 
      Bleed Left 
     </div> 
     <div class="bleed-right"> 
      Bleed Right 
     </div> 
    </div> 
</div> 

CSS

body { 
    margin: 0; 
    padding: 0; 
} 
.body-hide { 
    width: 100%; 
    overflow: hidden; 
} 
.main-body { 
    width: 50%; 
    background: rgba(0,0,0,0.3); 
    border: 1px solid #000; 
    margin: auto; 
    font-family: Arial; 
    text-transform: uppercase; 
    margin-top: 100px; 
} 
.bleed-left { 
    border: 1px solid #000; 
    background: rgba(0,0,0,0.3); 
    height: 100px; 
    margin: 20px 0 20px -9989px;  
    padding: 10px 10px 10px 9999px; 
} 
.bleed-right { 
    border: 1px solid #000; 
    background: rgba(0,0,0,0.3); 
    height: 100px; 
    margin: 20px -9999px 20px 0;  
    padding: 10px 9989px 10px 10px; 
} 

Answer 3

這可能是簡單的東西作爲拒絕在Y軸上滾動。

對於剛剛視覺效果，使用方法：

div { 
overflow-y: hidden; 
}