4

私はこのHTMLを持っています：

<body>
<div id="logo">
    <table id="width100" cellpadding="0" cellspacing="0"  >
        <tr>
            <td width="33.33%" align="left">&nbsp;</td>
            <td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
            <td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
        </tr>
        <tr bgcolor="#731000" id="width100">
            <td height="15" colspan="3" ></td>
        </tr>
    </table>
</div>

<center>
<div id="container">
    <div id="main_body">
        asd
    </div>
</div>
</center>

そしてこのCSS：

body {
    width:100%;
    height:100%;
    margin:0px;
    background-color:#ECECEC;
}

#logo {
    width:100%;
    height:165px;
    background-color:#FFFFFF;   
}

#width100 {
    width:100%;
}

#container {
    background-color:#FFFFFF;
    height:100%;
    width:900px;
}

#main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%;
}

私の質問は、なぜ私のmain_bodydivがページの中央に伸びないのですか？それは文字と同じくらいの高さです。

HTMLタグを削除すると、<center>下に伸びますが、画面サイズが100％の場合は、最後までスクロールする必要があります。それ以上ではなく、画面の端に配置したかったのです。

4

2 に答える 2

0

height:100%タグを追加html,bodyおよび削除する<center>代わりmargin:0 autoに、#container

  html,body{height:100%}
  #container {
    background-color:red;
    height:100%;
    width:900px; margin:0 auto
  }
  #main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%; margin:0 auto
  }

デモ

その問題については、次のようにhtmlを変更してください。

  • マークアップ全体に外部divを追加し、それを作成してコンテナーdivposition:relativeに渡しますposition:absolute
  • z-indexコンテナdivをロゴdivの下にプッシュするために使用します。
  • 最後に、の中に空のdivを追加#main_bodyして、高さを指定します（ロゴのdivの高さと同じ）

HTML

<div id="wrapper">
<div id="logo">
   logo html
</div>
<div id="container">    
    <div id="main_body">
        <div class="space"></div>
        asd
    </div>
</div>
    </div>

CSS

#wrapper{
    height:100%; 
    background:grey; 
    position:relative; 
}
#container {
   background-color:red;  
   height:100%;
   width:900px; 
   margin:0 auto; 
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0; 
   z-index:1;
}
#main_body {
   width:800px;  
   background-color:#FFFFFF;
   height:100%; 
   margin:0 auto; 
}
.space{height:165px}

デモ2

于 2013-01-31T11:16:59.713 に答える
0

height:100%高さが設定されている最初の親要素の高さを取ります。すべての親オブジェクトにはパーセンテージの高さがありますので、体のすぐ上まで行き、その高さの100％を取ります。

#logoパーセンテージの高さとして設定してから、残りのパーセンテージとして設定する必要があります。そうしないと、cssで計算を行う方法がまだ有効になっていないmain_bodyため、サイズを変更するためにjavascript / jqueryが必要になります（ただし、間もなく登場する可能性があります） main_body）。

彼らが同じことを達成しようとしていたので、この投稿を見てください：

CSS3で値を計算する

jQueryルートを使用する場合は、jqueryライブラリをページに追加する必要があり（通常、これをページの下部に配置します）、その後、次のように実行するスクリプトを含める必要があります。

<script type="text/javascript">
  $(document).ready(function () { 
    var newHeight = $(window).height() - $('#logo').height();
    var oldHeight = $('#container').height();

    if (newHeight > oldHeight) {
      $('#container').height(newHeight);
    }
  });
</script>

これ$(document).ready(function(){})は、ドキュメント（Webページ）の読み込みが完了すると、関数内にあるすべてのものが起動されることを意味します

于 2013-01-31T11:24:16.950 に答える