1. ホーム
  2. css

[解決済み】DIVブロックにコンテンツがない場合でも、強制的にページの下まで伸ばすには?

2022-04-12 13:27:37

質問

以下のマークアップでは、content div をページの下まで伸ばそうとしていますが、表示するコンテンツがある場合のみ伸ばします。このようにしたい理由は、表示するコンテンツがない場合でも、垂直方向の境界線がページの下に表示されるようにするためです。

以下は私の デモ :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}
<form id="form1">
  <div id="header">
      <a title="Home" href="index.html" />
  </div>

  <div id="menuwrapper">
      <div id="menu">
      </div>
  </div>

  <div id="content">
  </div>
</form>

解決方法は?

あなたの問題は、divの高さが100%でないことではなく、それを囲むコンテナが100%でないことです。これは、あなたが使用していると思われるブラウザで役立ちます。

html,body { height:100%; }

パディングやマージンも調整する必要があるかもしれませんが、これで90%は完成です。すべてのブラウザで動作させる必要がある場合は、少しいじくり回す必要があります。

このサイトには優れた例がいくつかあります。

http://www.brunildo.org/test/html_body_0.html

http://www.brunildo.org/test/html_body_11b.html

http://www.brunildo.org/test/index.html

に行くのもおすすめです。 http://quirksmode.org/