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

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

您可以使用最小宽度为500像素或宽度为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>

Answer 2

当内容加横幅高于视口时，您可以使用自适应CSS并隐藏横幅：

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

Answer 3

只需将div：hidden添加到div“main”css。

将其添加到元素会隐藏可能的条件侧边栏。

你的新css会是这样的;

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