5

私はコミック サイトhttp://hittingtreeswithsticks.comを持っており、ヘッダーの幅を 100% に維持したい (したがって、どのブラウザーでも 100% 伸びる) 一方で、コンテンツの幅は固定 (950px の固定幅を維持したい) ）。

したがって、それを実現するために、ヘッダーとフッターを入れ、<div class="container-fluid">メインコンテンツを入れ<div class="container">ます。

1920 x 1080 の解像度で IE9、Chrome、および FireFox でローカルにテストを行ったところ、ヘッダーは正常に見えました。

ここに画像の説明を入力

しかし、小さいモニター (1366 x 768) でテストしたところ、ヘッダー項目がまとまっているように見えました。

ここに画像の説明を入力

header.php ファイルでは、見出しのロゴとリンク用にこれを (簡略化して) 設定しています。

<div class="container-fluid">
   <div id="header">
     <div class="row-fluid">
       <div class="span3 offset3">
         <logo>
       </div>
       <div class="span1">
        <comics link>
       </div>
       <div class="span1">
        <about link>
       </div>
      And so on...

header.php では<div class="container">、ヘッダーを含む他のすべてのテンプレートcontainterがcontainer-fluid.

なぜそれが起こっているのでしょうか？

ありがとう！

4

5 に答える 5

6

コンテンツに最小幅が設定されていないため、ブラウザはそれを「マッシュアップ」して、より小さな解像度に適応させます。

次のような CSS ルールの使用を試みることができます。

#header { min-width: 1000px; }

(ここでは 1000px は任意です)。これにより、ヘッダーが 2 行に折り返されることはなくなりますが、小さな画面ではヘッダーの一部が表示領域の外に出てしまうことは明らかです。

編集:コードまたは作業ページへのリンクにフィドルを提供すると、これにも影響を与えるパディング/マージンがあるかどうかを確認できます。

于 2013-03-18T22:35:01.427 に答える
2

comic_style.css の #header 要素のオーバーフロー プロパティを変更してみてください。

#header {
background: url("images/SiteDesign/Comic_Header.png") repeat scroll 0 0 transparent;
height: 50px;
overflow: auto;scroll;
}

または、bootstrap.css の img タグが問題を引き起こしている可能性があります

img {
    border: 0 none;
    height: auto;
    vertical-align: middle;
}

ヘッダー画像用に別のタグを作成する

于 2013-04-01T09:36:18.753 に答える