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

【问题标题】：Content outside "window" not visible?“窗口”外的内容不可见？
【发布时间】：2013-04-22 02:53:05
【问题描述】：

我正在尝试制作一个带有顶部边框的网站，但是当浏览器窗口被压缩并出现水平滚动条时，只有当滚动条位于其原始位置时，顶部的边框才可见。如果向右滚动，边框会停止。

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/

【问题讨论】：

标签： html css window border

【解决方案1】：

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

#container {
  min-width: 400px;
}

【讨论】：

【解决方案2】：

#container {
    overflow: auto;
}

【讨论】：