0

私は驚いています。Internet Explorer と Mozilla Firefox では、このページは非常に高くなっています。jQuery を使用して、要素の高さを要素とほぼ同じ高さに設定しています。Chrome では完璧に見えますが、IE と FF は非常に背の高いページをレンダリングします。さらに奇妙なことに、Firefox のインスペクターを使用すると、ページが要素の高さをはるかに超えていることがわかります。

jQuery:

(function($){
   var resize = function(){
      var height = $('html').height();
      $('#wrap > div').height(height-38);
      $('html').height(height); // Added this to try and fix the height
   };
   $(window).resize(resize).load(resize);
})(jQuery);

HTML レイアウト:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <!-- ... --->
   </head>
   <body>
      <div id="wrap"><div> <!-- I want the child of #wrap to be the height of the entire page. -->
         <div id="left"><div>
            <!-- ... -->
         </div></div>
         <div id="main">
            <!-- ... -->
            <div class="clear"></div>
            <div id="body">
               <!-- ... -->
            </div>
         </div>
      </div></div>
   </body>
</html>

CSS:

html{height: 100%;}
body{background: url('images/body.jpg') no-repeat fixed left top; border: 8px solid #BBB0A2; border-width: 8px 0 0 6px; min-width: 902px;}
#wrap{max-width: 1130px;}
#wrap > div{float: right;}
#main{float: left; width: 630px; height: 100%; padding: 10px 20px 20px 20px; background: #FFFFFF;}
#body{margin-top: 20px; font: 13px/18px Georgia, serif; color: #AE9073; position: relative;}

これが私が使用しようとしている Web サイトです: http://www.phoenixarizonashutters.com/

ご協力いただきありがとうございます。

4

2 に答える 2

2

あなたのリクエストを理解したかどうかはわかりませんが、コードには多くのインラインスタイルがあり、これは悪い習慣です。

jQuery関数の影響を受けているdiv.clearがあります

$('#wrap > div').height(height-38)

セレクターが.clearを選択しないようにするには、：notメソッドを使用できます。

jQuery $('#wrap > div:not(".clear")').height(height-38)
于 2012-12-12T19:01:36.813 に答える
2

含まれているコードは問題を示していませんが、サイトにアクセスすると、次の 2 つの要素が表示されます。

<div style="height: 695px;">...</div>
<div class="clear" style="height: 695px;"></div>

クリアする div にはおそらく高さは必要ありません。高さの原因となっているものをすべて削除すると、サイトのサイズがより適切になります。

于 2012-12-12T19:15:47.103 に答える