Question

可能重复：
100% width bg images not extending on horizontal scroll

我一直在努力解决这个问题。我正在为旅行社建立一个非常基本的网络应用程序，但是为了给出一些布局，我们决定使用带有2个彩色子横幅的横幅。问题是，如果我的分辨率为1366x768（px）。如果CSS正确，横幅自然适合屏幕分辨率。情况确实如此，2个彩色横幅填满，直到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;
}

非常感谢你的帮助！

祝你好运

Answer 1

正如Andy所说，<div>元素不是自我关闭的，所以你应该正确地为它们添加结束标记。

如果溢出表是个问题，只需设置最大宽度就可以解决这个问题。

e.g

table {
    max-width: 100%;
}

Answer 2

您收到的评论有一些非常有用的信息。另一个快速解决方法如下，使<div class="banner">始终占据宽度的100％而不是左右滚动。

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

然而，它可能会破坏一些相对定位的元素。

屏幕分辨率过大时DIV溢出

2 个答案: