中途半端を極める

web関連で役に立ちそうなものを紹介いたします

css

【CSS】スクロールバーをスクロールすると背景画像が切れる現象を解消する

投稿日:

ウィンドウ幅が狭い場合(スクロールバーが出ている時)、ウェブサイトの背景が切れてしまう場合があります。
最近まであまり気にしないようにしていたのですが、解消方法があるとの事ですのでこちらに記しておきます。

<div class="w100percent">
  <div class="w700px"><p>固定サイズエリア</p></div>
</div>
*{
    margin:0;
    padding:0;
}
.w100percent {
	width:100%;
	background:#000/*黒*/;
    min-width:700px;
}
.w700px {
	width:700px;
	margin:0 auto;
    color:#fff;
}

上記のように「サイト全体の最小幅」を指定することにより現象が解消するようです。

参考:【CSS】意外と知られていない!横幅100%の背景が切れるバグ
http://sekabull.hatenablog.jp/entry/2013/08/07/105412

-css

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

【CSS】CSS3を生成してくれるサイト

これからCSS3を使う機会が増えると思います。まだまだCSS3にはなれていないので、使う時は今回紹介するサイトを使用しています。 日進月歩とはいいますが、あまりにも早すぎる・・・せっかくCSSを覚えた …

【IE6】CSSでリストの隙間を消す方法

IE6で出る症状です。リストでナビゲーション作ってるときによく出くわします。 今でもIE6かよって話もありますが、一応自分用メモって事で記しておきます。

ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。

【CSS】よく使うCSSハック一覧

ブラウザごとにページを確認すると、レイアウトが崩れていることが多いかと思われます。それを直すためにCSSハックを仕方なく利用します。 ※個人的な性格なのか、あまりCSSハックを使用してレイアウトを整え …

【CSS】IEでCSS3を使うようにする方法

角丸が多用されているようなサイトにはCSS3で対応した方が楽です。しかし、Internet Explorer6,7,8がCSS3非対応などであきらめている人が多いのではないでしょうか? そういった人に …