当屏幕分辨率过大时，DIV会溢出。

Question

可能是重复问题：
水平滚动时，100％宽度的背景图像不会延伸

我已经为这个问题苦苦挣扎了很长时间。我正在为旅行社构建一个非常基本的Web应用程序，但为了提供一些布局，我们决定使用带有两个彩色子横幅的横幅。问题在于，如果我的分辨率为1366x768（px），那么如果CSS正确，横幅将自然适合屏幕分辨率。事实确实如此，两个彩色横幅填充到1366px。

然而，有一个比屏幕分辨率更大的表格，因此一旦向右滚动，我发现我的彩色子横幅根本不继续，只是纯白色。是否有任何方法使彩色横幅即使超出屏幕边缘也能继续显示？

我已经为您包含了HTML和CSS代码：

HTML

<div class="banner">
  <span>- ETTA (Electronic Transactions for Travel Agents)</span>

  <div class="orangeBanner" />
  <div class="blueBanner" />
</div>

CSS

.banner img {
    vertical-align: middle;
}

.banner span {
    font-size: 30px;
}

.banner .orangeBanner {
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding-left: 8px;

    font-variant: small-caps;
    background-color: #f18b02;
}

.banner .blueBanner {
    /*Layout*/
    display:inline-block;
    height: 30px;
    width: 100%;
    line-height: 30px;
    padding-left: 8px;
    margin-bottom: 5px;

    /*Style*/
    font-variant:small-caps;
    color: #ABD5DF;
    background-color: #009DE0;
}

非常感谢您的帮助！

最好的问候。

- Herazio

---

我只是猜测，但值得一看。我认为您的表格溢出了其中一个父标签，该标签具有css width:100%。我曾经遇到过类似的情况，并发现超过100％的表格不会自动使父标签比视口更宽，如果您已将它们指定为100％宽。问题很可能不在您提供的代码中。如果您希望我仔细查看，请添加父元素和CSS直到HTML标记。 - Bazzz

不知道是否相关，因为您没有提供足够的代码，但 <div /> 的作用就像 <div> 一样，所以它们并不会像您想象的那样关闭。 - Andy

你能展示一下你想要实现的效果的图片吗？ - James South

Answer 1

你得到的评论包含了一些非常有用的信息。 另一个快速修复方法是，使 <div class="banner"> 始终占据100%的宽度，不会左右滚动。

.banner  {
    width:100%;
    position:fixed;
    left:0;
}

这可能会搞乱一些相对定位的元素。

- Robert Fricke

Answer 2

正如安迪所说，<div>元素不是自闭合的，因此您应该正确地添加闭合标签。

如果表格溢出是一个问题，只需设置最大宽度即可解决。

e.g

table {
    max-width: 100%;
}

- James South