“窗口”之外的内容不可见？

Question

我试图制作一个顶部边框在网页上运行，但是当浏览器窗口被压缩并且水平滚动条出现时，只有当滚动条位于原始位置时，顶部的边框才可见。如果您向右滚动，则边框停止。

HTML代码：

<div id='container'> 
    <div id='content'> 
     As you can see, when the window is small enough for scrolling, the border only exists in the "original" window space. 
    </div> 
</div> 

CSS代码：

* { 
    border:0; 
    padding:0; 
    margin:0; 
} 
#container { 
    border-top:1px solid green; 
} 
#content { 
    width: 400px; 
    margin: 0 auto; 
} 

JS小提琴显示发生了什么。 （调整你的浏览器窗口，以便水平滚动条将出现在输出窗口上）： http://jsfiddle.net/RL77f/

Answer 1

#container { 
    overflow: auto; 
} 

Answer 2

这是一种常见的行为，当浏览器窗口变得比固定内容宽度窄。解决方案是向外部容器添加最小宽度。

#container { 
    min-width: 400px; 
}