Css 元素，而不创建滚动条

如果窗口太窄，我是否可以使横幅到达其容器外部，而不创建水平滚动条

我以为我以前做过这件事，利润率是负的，但现在没法用了

演示：

我希望这不会在窗口/框架太窄时创建水平滚动条。

​

---

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

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

---

只需在div“main”css中添加overflow:hidden

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

你的新css看起来像

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

---

您可以使用最小宽度为500px或宽度为100%的容器，具体取决于您想要滚动条还是根本不想要滚动条；添加相对位置和溢出隐藏，然后在其中添加另一个容器，该容器的设置宽度为500px，左右两侧的边距为自动。使用绝对位置将内容放入内部容器中；在这种情况下，您的#横幅将是正确的：-50px

我在这里修改了你的小提琴：

#主要{
最小宽度：500px；
保证金：0自动；
位置：相对位置；
溢出：隐藏；
}
#里面{
宽度：500px；
保证金：0自动；
身高：100%；
位置：相对位置；
背景：红色；
}
#横幅{
背景：绿色；
位置：绝对位置；
右：-50px；
宽度：150px；
高度：300px；
}
#内容{
宽度：400px；
高度：500px；/*模拟内容*/
背景：蓝色；
}
我希望这不会在窗口/框架太窄时创建水平滚动条。

此外，您可以更改witdh或边距，使横幅仍在页面中，但如果调整窗口大小，则横幅在窗口外，并且您不需要滚动条……这与在视口中没有足够空间时隐藏横幅不是一样吗？无论如何，使用响应式CSS，您可以更改横幅的属性，也可以将其移动到内容中，或者更改宽度。然后，我必须根据窗口宽度动态调整横幅的大小。我不希望溢出的部分被隐藏。抱歉，这可能不清楚：）只要您继续使用位置绝对/相对和负边距以及严格的宽度，这是不可能的。使用浮动和最大/最小宽度构建样式。和周围的集装箱舱。

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

<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>