0

ウェブサイト/アプリケーションのランディング ページの html/css に取り組んでいますが、あまり多くの変更を加えたくありません。テンプレートは Jinja2 を使用してレンダリングされ、ホームページは page_template.html から拡張されます。page_template.html を拡張するページ テンプレートはたくさんあるので、できるだけ手を加えないようにしたいと思います。デザイナーは、ブラウザーや画面の解像度に関係なく、ホームページの 1 つ (または 2 つ) の div の背景色をブラウザーの幅全体に広げたいと考えています。ページ テンプレートには、このpage-containerようにコンテンツ全体をラップする ID があります。

#page-container {
  background-position: 0 85px;
  max-width: 1200px;
  position: relative;
  margin: 0 auto;
}

この 1200px の幅の外に div を拡張したい場合は、次のようなことを試すことにしました。 

.overflow {
  background-color: #fff;
  margin-right: -200px;
  margin-left: -200px;
  padding-right: 200px;
  padding-left: 200px;
}

そして、次のようにします。 

<div id="page-container">
  <div class="overflow">
   Content
  </div>
</div>

そしてそれはうまくいくようです。そして、それはこのウェブアプリで十分に機能します（私は思います）。.overflowただし、ブラウザを小さくしても、このクラスを持つ div のサイズが変更されないという点で、ページの応答性が損なわれます。これを行うためのより良い方法はありますか？そして、応答性に影響を与えずにこれを行う方法はありますか?

4

1 に答える 1

1

これは、:before および :after 疑似要素を使用して実行できます。

質問で使用したマークアップを想定すると、この CSS はうまくいくはずです。

.overflow { position: relative; }

.overflow:before,
.overflow:after {
    display: block;
    content: " ";
    position: absolute;
    width: 9999px;
    top: 0;
    bottom: 0;
    background: #c0ffee;
}

.overflow:before { left: 100%; }
.overflow:after { right: 100%; }

水平スクロール バーを防ぐために、overflow-x: hidden を body 要素と html 要素に追加することを検討することもできます。

body, html { overflow-x: hidden; }

これに対するブラウザーのサポートは基本的に IE8+ であるため、ほぼすべてのブラウザーで動作することが期待できます。

于 2013-05-14T17:04:54.553 に答える