6

重複の可能性:
100% 幅の背景画像が水平スクロールで拡張されない

私はかなり長い間この問題に苦労してきました。私は旅行代理店向けの非常に基本的な Web アプリケーションを構築していますが、いくつかのレイアウトを提供するために、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;
}

助けてくれてどうもありがとう！

よろしくお願いします

4

2 に答える 2

0

いただいたコメントには、本当に役立つ情報が含まれています。別の簡単な修正は次のとおりです。<div class="banner">常に幅の 100% を占有し、左右にスクロールしないようにします。

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

ただし、相対的に配置された要素を台無しにする可能性があります。

于 2012-12-20T12:28:55.883 に答える
0

Andy が言ったように、<div>要素は自己終了ではないため、終了タグを適切に追加する必要があります。

テーブルのオーバーフローが問題である場合は、最大幅を設定するだけで問題が解決するはずです。

例えば

table {
    max-width: 100%;
}
于 2012-12-20T12:18:16.503 に答える