0

CSS 100% の高さで奇妙な問題が発生しています。私のサイトは以下の通りです。

<html>
  <body>
    <div id="container">
      <div id="header"></div>
      <div id="content"></div>
    </div>
  </body>
</html>

コンテナーの最小高を 100% にしようとしているので、CSS は次のようになります。

html { min-height: 100%; }
body { height: 100%; }
#container { height: 100%; }

問題は、が高さの 100% を埋めず、と#containerのコンテンツの量に応じてのみ拡張し、とが空または削除されている場合、はまったく拡張しないことです。#header#content#header#content#container

非常に単純なことを見落としているように感じますが、これをずっと見ていて、行き止まりにいます! 誰かが問題を指摘できますか？

4

1 に答える 1

1

パーセンテージの高さ : パーセンテージの高さを に設定するに#containerは、その親要素に特定の高さが必要です。height:100%この場合、必要な特定の効果は、 または のいずれかを使用して実現できますmin-height:100%。これらのいずれかを実現するには、 のすべての祖先の#container高さまたは最小高さが 100% である必要があります。

html, body, #container {
    height: 100%;
}

また

html, body, #container {
    min-height: 100%;
}

JS フィドルの例

min-heightvs.の使用height: 質問の狭い範囲内では、同じ効果があります。しかし、height と min-height の両方を持つページでは:

  • min-height が height より大きい場合 (指定されているかどうかに関係なく)、min-height が使用されます。
  • 高さが min-height より大きい場合 (指定されているかどうかに関係なく)、その高さが使用されます。

max-height が指定されている場合 (例: #container { max-height: 50px })、これは高さを無効にします。ただし、max-height で min-height を無効にすることはできません。このリンクで詳細をお読みください。

注: min-height一部のバージョンの Internet Explorer ではサポートされていません。

于 2013-01-16T20:52:31.807 に答える