無法創建滾動條的外部容器元素

Question

如果窗口太窄，我可以在其容器外伸出一條橫幅，而不創建水平滾動條嗎？

我以爲我以前做過這樣做的負邊距，但現在無法使用它。

演示：http://jsfiddle.net/Znarkus/s95uz/

<div id="main"> 
    <div id="banner">I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div> 
    <div id="content"> 

    </div> 
</div> 

Answer 1

您可以使用最小寬度爲500px或寬度爲100％的容器，具體取決於您是否需要滾動條或根本沒有;添加相對位置，並溢出隱藏，然後添加另一個容器，這是您的設置寬度爲500px，左右邊距爲自動。將你的內容放在內部容器中，使用絕對位置;在這種情況下你的#banner會是正確的：-50px;

我在這裏修改您的提琴：http://jsfiddle.net/s95uz/14/

<style type="text/css"> 
#main { 
min-width:500px; 
margin: 0 auto;  
position: relative; 
overflow: hidden; 
} 
#inside{ 
width:500px; 
margin:0 auto; 
height:100%; 
position:relative; 
background: red; 
} 
#banner { 
background: green; 
position: absolute; 
right: -50px; 
width: 150px; 
height: 300px; 
} 
#content { 
width: 400px; 
height: 500px; /* Simulate content */ 
background: blue; 
} 
</style> 

<div id="main"> 
    <div id="inside"> 
     <div id="banner"> 
    I want this to not create a horizontal scrollbar, when the window/frame is too narrow.</div>  
     <div id="content"></div> 
    </div> 
</div> 

Answer 2

您可以使用CSS響應和隱藏廣告在內容加上旗幟比視高：

@media only screen and (max-width: 550px) { 
     #banner { display: none;} 
    } 

Answer 3

只需添加溢出：隱藏到d iv「主」css。

將此添加到元素可隱藏可能的條件側邊欄。

你的新CSS看起來像;

#main { 
    width: 500px; 
    margin: 0 auto; 
    background: red; 
    position: relative; 
    overflow:hidden; 
}