容器外的元素而不创建滚动条

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，左侧和右侧的边距为 auto。使用绝对位置将内容放入内部容器内；在这种情况下，您的#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>