容器外部的元素，但不创建滚动条 [英] Element outside container without creating scrollbars

问题描述

如果窗口太窄，是否可以在不创建水平滚动条的情况下使横幅到达其容器之外?

Can I make a banner reach outside of its container, without creating horizontal scrollbars if the window is too narrow?

我以为我以前曾以负边距做到这一点，但现在无法使其正常工作.

I thought I had done this before with negative margins, but can't get it to work now.

演示: 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>

推荐答案

您可以使用最小宽度为500px或宽度为100％的容器，具体取决于您是否需要滚动条；添加相对位置，并隐藏上溢，然后在其中添加另一个容器，该容器是您设置的500px宽度，左侧和右侧的边距为auto.使用绝对位置将您的内容放入内部容器中；在这种情况下，您的#banner应该是正确的:-50px;

You can use a container that has a min-width of 500px or width 100% depending on if you want a scroll bar or none at all; add position relative, and overflow hidden and then inside of that add another container that is your set width of 500px with a margin of auto for the left and right. Put your content inside of the inner container using position absolute; in this case your #banner would be right: -50px;

我在这里修改了您的小提琴: http://jsfiddle.net/s95uz/14/

I've modified your fiddle here: 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>

这篇关于容器外部的元素，但不创建滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！