Home/ Questions/Q 8987837
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T21:53:10+00:00

I am aghast. In Internet Explorer and Mozilla Firefox, this page is really tall!

  • 0

I am aghast. In Internet Explorer and Mozilla Firefox, this page is really tall! I’ve been using jQuery to set the height of an element to be almost as tall as the element. It looks perfect in Chrome, but IE and FF render a really tall page. What’s even weirder is, when using Firefox’s inspector, I can see the page extends far beyond the height of the element!

The 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);

The HTML layout:

<!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>

The 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;}

Here’s the web site I’m trying to work with: http://www.phoenixarizonashutters.com/

Thanks for your help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your included code doesn’t demonstrate the problem, but if I visit your site, I can see these two elements:

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

    Your clearing div probably doesn’t need a height – remove whatever is causing that and your site becomes more reasonably sized.

    • 0