0

HTML:

<div class="content">
    <div class="card">
    </div>
</div>

CSS:

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
}

http://jsfiddle.net/aJhEF/1/

コンソールで調べると、.content幅と高さが機能していることがわかります。では、幅と高さが 100% に設定されている子要素が、親の幅と高さを埋めないのはなぜでしょうか?

4

3 に答える 3

4

子要素は親のmin-heightプロパティを継承しません

これが、.card 要素の高さが 0 である理由です。

幅に関する限り、.cardは親の幅を埋めます。

于 2013-08-01T12:27:12.043 に答える
1

ダニエルドは正しい。

これを解決するには、相対位置と絶対位置を負のマージンと組み合わせて使用​​します (パディングを補正するため)。

.content {
    min-height: 350px;
    min-width: 320px;
    max-width: 350px;
    padding: 15px;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    margin: -15px;
}
于 2013-08-01T12:40:20.350 に答える
0

親にセットのパディングを与えたからです。padding: 15px;div を埋めるために削除します。

パディングは、要素の境界の内側にある余分なスペースです。外側にスペースが必要な場合は、margin を使用します。

子に親要素を記入してもらいたいと述べましたが、パディングは親要素の内側に余分なスペースがあるため、パディングがある限り、子はその親に記入しません。

編集:必要な結果が表示されない理由は、要素に実際のサイズではなく最小高さと最小幅があるためです。この要素セットのサイズ (ピクセルまたは %) を指定する必要があります。これは、子要素がその親の最小および最大の幅/高さを継承しないという事実によるものです。

JSFiddleを参照してください

于 2013-08-01T12:24:38.877 に答える