3

これは基本的にドキュメントがどのように見えるかです:

<body>
<div id="content_holder">
<div class='all_links'>
</div>
  <div class="item">
        <div class="notice"></div>
    </div>
</div>
<div id="bottom_nav">
</div>
</body>

そしてCSS：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    }

body{
overflow-y:scroll;
min-width: 1024px;
}

#content_holder{
    min-height: 100%;
}

.item {
width: 800px;
position: relative;
top: 100px;
left: 50%;
margin-left: -400px;
text-align: center;
min-height: 100%;

}

この特定のページhtml, body, .itemで min-height に関するプロパティがパーセントで機能しないという問題。

他のページではすべて問題ありません。.item本体の親。ここで何が悪いのかわかりません。Chrome Dev Tool で高さを確認すると、このページの本体の高さは 360px で、もちろん本来の 2 倍の高さです。

なんで？

UPD：フィドル

私が見つけたのは、高さのプロパティが特に機能せず#content_holder、ボディで機能することです

4

2 に答える 2

2


heightパーセンテージで任意の要素に設定されている場合、直接の親要素が (heightパーセンテージではなくpxまたはでem) 指定されている必要があります。

そのルールの奇妙な例外は<html>要素です。これが指定されている場合height: 100%、直接の子要素がheightパーセンテージ (つまり、<body>要素) として持つことができます。

設定に関してmin-height: 100%は、これにより初期サイズが高さ 100% に設定され、要素がその高さを超えることができます。 上記の同じ規則にも従っていると

確信しています-- パーセンテージで設定された要素の場合、その直接の親要素は(パーセンテージではなく) 指定されている必要があります。min-heightheightmin-heightheight<html>heightパーセンテージ で設定されている要素。

ただし、要素がまたは値heightとして設定され、その直接の子要素がパーセンテージとして設定されている場合、孫要素はパーセンテージとして設定できます... pxemheightheight

于 2013-06-22T19:22:50.057 に答える
1

に変更min-height: 100%するだけheight: 100%です。

Web ページの高さは、ブラウザ画面の 100%、またはコンテンツの高さの 100% のいずれか大きい方になります。

于 2013-06-22T19:01:45.823 に答える