なぜposition：絶対;テスト部門の身長を拡大しますか？

Question

div.testは固定高さではなく自動高さに設定されていました。今

.test { 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    background: yellow; 
 
    width: 200px; 
 
    height: auto; 
 
    padding: 10px; 
 
}

<div class="test"> 
 
    it is a test info for my div . 
 
</div>

CSSでposition:absolute;を追加するには、他のすべてのCSS属性は変更されません。

.test { 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    background: yellow; 
 
    width: 200px; 
 
    height: auto; 
 
    padding: 10px; 
 
    position: absolute; 
 
}

<div class="test"> 
 
    it is a test info for my div . 
 
</div>

div.testの高さは、なぜ、拡大されたのですか？

Answer 1

最初のケースでは、divのpositionはstaticなので、top/right/bottom/leftプロパティは適用されません。位置をabsoluteに変更すると、それらのプロパティが考慮されます。具体的には、bottomというプロパティが原因でdivが拡張されています。あなたのコードからbottom: 0;を削除してください、あなたは戻ってそれのコンテンツの高さのdiv崩壊が表示されます：

.test { 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    background: yellow; 
 
    width: 200px; 
 
    height: auto; 
 
    padding: 10px; 
 
    position: absolute; 
 
}

<div class="test">it is a test info for my div.</div>

Answer 2

max-height:を使用して、予想よりも大きくならないようにしてください。