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

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>

​</p>

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

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

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

你的新 CSS 看起来像；

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