6

可能重复：
100% 宽度的 bg 图像未在水平滚动时延伸

我已经为这个问题苦苦挣扎了很长一段时间。我正在为旅行社构建一个非常基本的 Web 应用程序，但为了提供一些布局，我们决定制作一个带有 2 个彩色子横幅的横幅。问题是，如果我的分辨率是 1366x768 (px)。如果 CSS 正确，横幅自然会适合屏幕分辨率。确实如此，2 个彩色横幅填充到 1366 像素。

有; 但是表格比屏幕分辨率大，所以一旦我向右滚动，我看到我的彩色子横幅根本没有继续，只是纯白色。有什么方法可以让彩色横幅在屏幕边缘之后继续？

我已经为您包含了 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;
}

非常感谢你的帮助！

此致

4

2 回答 2

0

正如 Andy 所说，<div>元素不会自动关闭，因此您应该正确地为它们添加关闭标签。

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

例如

table {
    max-width: 100%;
}
于 2012-12-20T12:18:16.503 回答
0

你得到的评论有一些非常有用的信息。另一个快速修复如下，<div class="banner">总是占据 100% 的宽度，而不是左右滚动。

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

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

于 2012-12-20T12:28:55.883 回答