Web サイトの両側にある空白を取り除くにはどうすればよいですか?
どのようなサイズのブラウザ ウィンドウにも合わせられるように、背景を柔軟にしたいと考えています。div コンテナーのサイズを変更する必要があると思いますが、多くの問題が発生しています。
Web サイトの両側にある空白を取り除くにはどうすればよいですか?
どのようなサイズのブラウザ ウィンドウにも合わせられるように、背景を柔軟にしたいと考えています。div コンテナーのサイズを変更する必要があると思いますが、多くの問題が発生しています。
このフィドルは多かれ少なかれあなたが探しているものですか?
ハードコーディングされた幅を削除し、背景と一緒にヘッダーにglobal_container_
設定しました。と it の子要素から削除し、子要素の左マージンと右マージンが であることを確認しました。からハードコードされた幅も削除しましたが、全幅も必要な場合は、コンテナーの外側を移動する必要があります(またはコンテナーからハードコードされた幅を削除します)。width: 100%;
repeat-x
header
float: left;
header
auto
headline
bottomline
また、フィドルでこれを変更する必要はなかったと思いますが、全幅を有効にするには、clearfix
からクラスを削除するglobal_container_
か、に設定する必要がある場合があります。display: block;
footer
- に設定し、width: 100%;
必要な場所に配置されるまで、フッターと子要素のパディングとマージンを調整します。
あなたのウェブサイトは、css でこのルールを使用して、固定幅とページの中央に揃える余白を使用して構築されました。
margin:0 auto;
サイト内のすべてが、ラッパー幅の仕様内に構築されています。ほとんどのレスポンシブ サイトには、依然としてページ ラッパーと最大幅があります。ボディ要素に背景を設定するのが面倒な空白の場合
body{background:color;}
または画像の場合
body{background-image:url('background_image_url')}
私は W3C の最大のファンではありませんが、行き詰まった場合の詳細については、これを参照してください - http://www.w3schools.com/css/css_background.asp
サイトがさまざまな画面サイズやブラウザーのサイズ変更に反応しないことが懸念される場合は、専門家を雇ってサイトをレスポンシブ デザインに再設計することを検討してください。