1

私は最近サイトに取り組んでいます。すべてのコンテンツを囲み、少なくともページと同じ高さの境界線を取得しようとしています。私の#Containerは、ページ全体を埋めるために展開する必要があるdivです。min-height：100％を使用しようとしています。私のCSSでは、しかし何らかの理由でそれはページ全体に境界線を拡大していません。これは私のウェブサイトです。ホームページは基本的なHTML設定です。

<div id="Container">
  <div id="header">
    <div id="menu">
        <ul id="navbar">
            <li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
            <li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
            <li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
            <li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
            <li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
            <li><a id="nav6" class="nav-text" href="#">Info</a></li>
            <li><a id="nav7" class="nav-text" href="#">About</a></li>
            <li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
        </ul>
     </div>
  </div>    
  <div id="content">
    <h3>Home Page</h3>
  </div>
  <div id="footer">
    <div id="footertext">Copyright &copy; UsedAtCollege.com</div>
  </div>
</div>

私のCSSもかなりシンプルです。CSSをリセットしましたが、CSSを取り出しても問題が発生したため、影響はないと思います。

* { 
  margin: 0; 
  padding: 0; 
}
#Container {
  width:980px;
  min-height:100%;
  margin-left:auto;
  margin-right:auto;
  margin-top:0px;
  border-style:solid;
  border-width:1px;
  border-color:rgb(154,154,154);
}

これが、ページ全体をラップするdivのCSSコントロールです。

最小の高さが画面の一番下まで境界線を下がっていない理由を誰かが知っているかどうかを知りたいだけですか？

4

2 に答える 2

4

これを CSS に追加します

html, body {
    height: 100%;
}
于 2012-07-28T20:58:04.043 に答える
0

そのような場合、Firebug や DOM-Inspector などが役に立ちます。Firebug を起動し、Firebug でページのコンテンツを表示すると、本文自体がページ全体に展開されず、ページの長さの約半分までしか展開されないことがわかります。示しています。これは、本体がそのコンテンツに従ってのみ拡張されるためです。ここではコンテンツは最小限であり、本体はその分だけ拡張され、min-height: 100%.

これを回避するには、ページ コンテンツ全体を絶対配置の wrapperdivでラップし、そのtopと のleft値を0pxに、高さと幅を に設定し100%ます。次に、境界線がページの下部まで拡張されます。もちろん、絶対に配置された要素は自然な寸法に寄与しないため、Firebug は依然として本体を半ページまでしか拡大表示しません。そのためには、相対位置を使用しmargin-top、効果を得るために必要な値に調整する必要があります。

于 2012-07-28T21:14:31.433 に答える