1

いくつかの異なるサイトで見た問題があり、解決策を見つけることができませんでした. 他の多くの人が同様の問題を抱えていることに気付きましたが、私が見たすべての修正は、私が現在取り組んでいるサイトでは機能していません. 基本的に私がやろうとしているのは、ウィンドウ全体にまたがる繰り返しの背景と固定幅のボディを持つヘッダーを備えたレスポンシブレイアウトです。基本的な html は次のようになります。

<html>
<body>
    <div id="header">Header content</div>
    <div id="main-content">Main content here</div>
</body>
</html>

css は次のようなものです。

html, body{
      width:100%;
}
#header{
      width:100%;
}
#main-content{
      width:1000px;
}

このコードは、私が取り組んでいるサイトの実際の内容を表すものではなく、私たちが何をしようとしているのかを理解してもらうためのものです。実際の html、css などを確認するには、 http: //236887.site-show.com/にアクセスしてご覧ください。サイトは最初は問題なく表示されますが、水平スクロール バーが表示されるようにウィンドウのサイズを縮小し、右にスクロールしてヘッダーを見ると、繰り返される背景が全幅に収まっていないことがわかります。 .

私が見つけた 1 つのことは、メイン コンテンツの width:1000px を削除すると、この問題が修正されたことです。ただし、メインコンテンツ領域をその幅に設定する必要があります。また、オーバーフローを非表示に設定し、ヘッダーにフロートを設定しようとしましたが、問題を修正するものは何もないようです。

これは特に、タブレットやスマートフォンなどで実行される Android/iOS システムの問題です。この問題について何か助けていただければ幸いです。

4

2 に答える 2

1

問題は、メイン コンテンツdiv が1000px (水平パディング30px ) に設定されているのに対し、CSS ファイルではヘッダーが960pxに指定されていることです。コンテンツに合わせてヘッダーの幅を広げると、問題が修正されます。

修正のコードは次のとおりです。

.grid-50-50 {
  display: table;
  width: 1030px;
}
于 2013-01-08T19:04:05.280 に答える
1

HTML5 で実行している場合は、100%<header>タグを使用してから 100% div 'wrapper' を追加することをお勧めします....これにより、柔軟性が向上します。

しかし、このために...ヘッダーを編集したくない場合は、 bodyタグでminを1030pxに設定してください：

body {min-width: 1030px;}

:)

于 2013-01-08T19:24:33.460 に答える