0

フィドルがありますhttp://jsfiddle.net/only_dimon/6fgyy/css があります：

.row {
width: 600px;
border: 1px solid #ccc;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.news {
width: 190px;
margin-left: 15px;
border: solid 1px #ccc;
background: #ddd;
float: left;
box-sizing: border-box;
padding: 10px;
height: 100%;
}
.news:first-child {
 margin-left: 0;   
}

JQueryは問題なくdivの高さを定義します。なぜ子供divは親の100％の高さを取得できないのですか？自動高さのあるdivの高さが未設定値であることを赤で示します。どうしてこんなことに？たとえば、overflow：hiddenは、divを「行」にして、子の最大の高さを取得します。そしてそれは視覚的にそれ自体の幅を変えました。

説明してください。

事前にTnx。

4

2 に答える 2

2

CSS の height プロパティの仕様を読んでください。

パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は 'auto' に計算されます。ルート要素の高さのパーセンテージは、最初の包含ブロックに相対的です。

注: 包含ブロックがブロック レベル要素に基づいている絶対配置要素の場合、パーセンテージはその要素のパディング ボックスの高さに対して計算されます。これは、パーセンテージが常に親要素のコンテンツ ボックスに対して計算されていた CSS1 からの変更です。

したがって、子のpositionto を設定するかabsolute(設定を無視し、float子ごとに明示的な水平方向の配置が必要になります)、height次のようにコンテナーの を明示的に指定する必要があります。

.row {
    position: relative;
    height: 400px;
    width: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 0 auto;
}

これが更新された fiddleです。
また、 「 Equal Height Columns 」に関するこのアプローチも確認してください。

于 2013-01-31T17:33:14.340 に答える
1

高さの継承は、ツリーの一番上まで行く必要があります。

試す：

body, html { height:100% }

.row {
    width: 600px;
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 0 auto;
    height:100%;
    position: relative;
}
于 2013-01-31T17:24:56.780 に答える