3

次のコードは正しく機能します

<!DOCTYPE html>
<html>
<head>
<title>Working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

一方、本体min-heightの代わりに使用するコードは、＃mainがスペースを占有するのを防ぎますheight

<!DOCTYPE html>
<html>
<head>
<title>Not working</title>
<style type="text/css">
html {
  height: 100%;
}
body {
  min-height: 100%; /* !!!!! difference in here */
}
div#main {
  min-height: 100%;
  background-color: red;
}
</style>
</head>
<body>
    <div id="main"></div>
</body>

奇妙なことは、クロムで検査を行うときです。どちらの場合も、本体は100％のスペースを適切に占有します。min-heightただし、子要素が0に変換される場合。min-height: 100%;なぜそれが発生し、回避策はありますか？背景のWebページの最小の高さを適切に機能させ、必要に応じて拡張したいと思います。

4

2 に答える 2

5

「なぜそれが起こるのか」について

このmin-heightプロパティは、明示的な高さが設定されている場合にのみ機能します。仕様はパーセンテージで読み取ります：

使用値を決定するためのパーセンテージを指定します。パーセンテージは、生成されたボックスを含むブロックの高さを基準にして計算されます。含むブロックの高さが明示的に指定されておらず（つまり、コンテンツの高さに依存する）、この要素が絶対的に配置されていない場合、パーセンテージ値は「0」（「min-height」の場合）または「none」として扱われます。 （「max-height」の場合）。

その重要なポイントは、「包含ブロックの高さが明示的に指定されていない場合（つまり、コンテンツの高さに依存する場合）」です。bodyがで設定されてmin-heightいる場合でも、計算のコンテンツの高さに依存しhtmlますが、指定されたサイズ（この場合、明示的に設定されている高さの100％）を下回ることはできません。ただし、body高さを設定するのはコンテンツに依存しているため、明示的な高さが設定されていないため、計算できませんdiv#main。min-heightbody

「回避策」は必要ですか？

あなたが望むすべてbodyを達成するための設定のようです。コンテンツが長いheight: 100%か短いか。

htmlの変更に関するコメントへの回答background-color

あなたがセットをいじくり回して物事を変える理由は、この仕様の表記法によるものだと思います（以下に引用）。これを設定すると、キャンバスのレンダリング自体が変更されます。htmlbackground-colorhtml

ルート要素の背景はキャンバスの背景になり、キャンバス全体を覆い、ルート要素自体に対してのみペイントされた場合と同じポイントに固定されます（「background-position」の場合）。ルート要素はこの背景を再度ペイントしません。

ただし、HTMLドキュメントの場合、作成者はHTML要素ではなくBODY要素の背景を指定することをお勧めします。ルート要素がHTML「HTML」要素または「background-color」の「transparent」と「background-image」の「none」の値を計算したXHTML「html」要素であるドキュメントの場合、ユーザーエージェントは代わりにキャンバスの背景をペイントするときに、その要素の最初のHTML「BODY」要素またはXHTML「body」要素の子から背景プロパティの計算値。その子要素の背景をペイントしてはなりません。このような背景も、ルート要素のみにペイントされた場合と同じポイントに固定する必要があります。

于 2012-05-21T13:44:49.797 に答える
-1

タグの&nbsp;中に入れてみてください。<div id="main"/>

于 2012-05-21T13:43:26.373 に答える