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

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 fiddle 显示正在发生的事情。（调整浏览器窗口的大小，使输出窗口上出现水平滚动条）：http: //jsfiddle.net/RL77f/

Answer 1

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

#container {
  min-width: 400px;
}

Answer 2

#container {
    overflow: auto;
}