2010-12-02 9 views
0

私は2つの背景イメージを持っています.1つはhtmlに、もう1つはボディにあります。しかし何らかの理由で、身体はウィンドウの全高に伸びない。または、具体的には、体のBGが表示されない約50pxのスペースがあります。私は50pxのコンテンツの下端に余裕を持っています(これは表示されませんが、大きな問題ではありません)。しかし、削除しても問題は解決しません。 You can see the problem here.私はなぜそれが分かりませんか?何か案は?たぶん私は基本的な何かを欠いている...ボディの背景イメージ/ボディをhtmlのように背の高いものにしないでください

編集:

私は、はい。私は、HTML Imageが大きすぎるかもしれないと思っていましたが、体のイメージをあまり伸ばしたくなかったのですが、意味がありません。

私はコードを投稿するつもりでしたが、手元にはありませんでした。ここでは、以下のようになります。

<!DOCTYPE HTML PUBLIC "-///W3C///DTD HTML 4.01 Transitional///EN" "http:///www.w3.org/TR/html4/loose.dtd"> 
    <head> 
     <script type="text/javascript" src="../_script/jquery-1.4.3.min.js"></script> 
     <script type="text/javascript" src="../_script/jquery.fancybox-1.3.4.pack.js"></script> 
     <link rel="stylesheet" href="../_script/jquery.fancybox-1.3.4.css" type="text/css" /> 

     <link rel="stylesheet" href="../_script/page_photo.css" type="text/css" /> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("a.single_image").fancybox(); 
      }); 
     </script> 
     <style type="text/css"> 
      /*v Reset v*/ 
      html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img, 
      small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend, 
      table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option 
      { margin: 0; padding: 0; border: 0; outline: 0; 
       text-align: left; vertical-align: middle; 
       text-decoration: none; list-style: none; 
      } 
      /*^ Reset ^*/ 
      html 
      { height: 100%; min-width: 1000px; 
       background: url("../_images/Wall.jpg"); 
       margin: 0; padding: 0; 
      } 
      body 
      { height: 100%; min-width: 1000px; 
       background: url("../_images/NAV_BG-HALF.png") repeat-y; 
       font: 300 12px/22.0px Palatino Linotype, Palatino, Book Antiqua, Georgia, serif; 
       color: #bdb798; 
      } 
      a:link    { color: #bdb798; text-decoration: none; } 
      a:visited   { color: #333333; text-decoration: none; } 
      a:hover    { color: #d8e5c2; text-decoration: none; } 
      a:active    { color: #a5a49f; text-decoration: none; } 
      #nav a:link   { color: #bdb798; text-decoration: none; } 
      #nav a:visited  { color: #9e9c7a; text-decoration: none; } 
      #nav a:hover  { color: #d8e5c2; text-decoration: none; } 
      #nav a:active  { color: #9e9c7a; text-decoration: none; } 

      #header 
      { height: 80px; 
       margin-bottom: 50px; padding: 10px; 
       background: #2e2d29; 
       border-bottom: 1px solid black; 
       background-image: url("../_images/head-bg.png") 
      } 

      @import url("constant.css"); 
      #nav 
      { width: 119px; height: 528px;   /*minus padding+border*/ 
       margin-right: 60px; padding: 10px; 
       border: 1px solid black; border-left: 0; 
       background: #2a2727; 
       *padding: 10px 0 10px     /*IE*/ 
       *width: 119px;        /*IE*/ 
       float: left; 
      } 
      #nav ul { margin: 0 10px; } 
      #nav hr 
      { margin: 5px -10px; 
       color: #848678; 
       border: 0; border-bottom: 1px solid black; 
       *margin: 5px 0 5px 10px; 
       *width: 99px; 
      } 
      #content 
      { min-height: 90%; overflow: hidden; 
       padding: 0 30px; 
       border: 1px solid black; border-right: 0; 
       background: #2a2727; 
       *padding: 0 30px 0 30px;       /* ???? */ 
       *font-size: 20px; 
      } 
      #content hr 
      { margin: 0 -30px; 
       clear: both; 
       border-top: 1px solid #010101; border-bottom: 1px solid #4a4a4a; 
       *margin: 0 0 0 -30px; 
       *width: 106%; 
      } 
      #content .bio 
      { width: 70%; max-height: 220px; overflow: auto; 
       margin: 0 20px 20px 0; padding: 10px; 
       float: right; 
      } 
      #content h2.author { margin: 5px 0; text-align: right; *font-size: 20px; } 
      #content .bio p { line-height: 1.25; text-align: right; } 
      #content .work 
      { width: 100%; height: 660px; overflow: auto; 
       padding: 10px; 
       clear: both; 
      } 
      #content .work img { vertical-align: center; border: 4px double grey; } 
     </style> 
    </head> 

    <body> 
     <div id="header"> 
      <img src="../_images/logo.png" /> 
     </div> 
     <div id="nav"> 
      Photography 
      <ul> 
       <li><a href="google.com">Beth Balmforth</a></li> 
       <li><a href="google.com">Kristen Popcheff</a></li> 
       <li><a href="google.com">Krystle Parker</a></li> 
       <li><a href="google.com">Renee Blanchord</a></li> 
       <li><a href="google.com">-RESERVED-</a></li> 
       <li><a href="google.com">-RESERVED-</a></li> 
      </ul> 
      <hr /> 
      Poetry 
      <ul> 
       <li>Rebecca R. Pierce</li> 
       <li>Justin Louras</li> 
       <li>-RESERVED-</li> 
      </ul> 
      <hr /> 
      <a href="../about.html">Home</a><br /> 
      <a href="../about.html">About</a><br/> 
      <a href="../about.html">Submit</a><br /> 
     </div> 

     <div id="content"> 
      <h2 class="author">Beth Balmforth</h2> 
      <div class="work"> 
       <img src="-photo-images/beth-balmforth_01.jpg" alt="Get 'em Tiger by Beth Balmforth" title="Get 'em Tiger by Beth Balmforth" /> 
      </div> 
      <hr /> 
      <div class="bio"> 
       <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dui odio, pulvinar luctus gravida in, varius ac est. Sed dapibus, felis sed placerat dignissim, urna magna egestas ante, aliquet tincidunt lacus ligula eu dui. Pellentesque pellentesque magna sed tortor ultricies lobortis. Mauris ultrices iaculis est, id vestibulum dolor molestie at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas rhoncus gravida neque, vitae posuere ipsum sodales sed. Cras adipiscing sagittis magna id varius. Quisque ut ligula eget justo volutpat adipiscing quis ut purus. Proin sollicitudin velit ac justo dictum adipiscing. Curabitur at sodales est. Praesent aliquam volutpat est, vel dignissim sapien dignissim non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
       </p> 
      </div> 
     </div> 
    </body> 
</html> 
+0

を小さな画像にコードを示すための悪い代用品です。私たちがあなたを助けることができるように、あなたが取り組んできたことにちょうど刺す。 – zzzzBov

+0

コードのjsfiddleまたは実例を提供し、テストケースを必要なコードに分割してください。 –

答えて

1

あなたが設定しようとしている:

html, body { 
    width:100%; 
    height:100%; 
} 
関連する問題