divは浮動コンテンツの高さを拡張しません

Question

この質問は一束と尋ねられました。私はコンテンツのサイズに拡張されないいくつかの浮動コンテンツを持つdivを持っています。私はclear:bothを追加しました（文字通りすべての可能な行には効果がありますが、それは解決しません）。そして、私はoverflow:hiddenまたはoverflow:autoのすべての置換をここのほとんどすべての要素で試しました。ちょうどよい尺度のために、私はまたdivsをスパンに変更しようとしました。

私が何をしていても、最終的にウィンドウのスキンを十分に細かくすると、ボタンはdivの領域の下に落ちます。なぜ、どうすれば修正できますか？まあ

JSFiddle

.confirmation-modal { 
 
    z-index: 1; /* Sit on top */ 
 
    width: 100%; /* Full width */ 
 
    height: 4rem; 
 
    max-height:18rem; 
 
    overflow: auto; 
 
    text-align: center; 
 
    border-radius:5px; 
 
    
 
} 
 

 

 
.confirmation-raised-panel{ 
 
    background-color: #ffed83; 
 
    padding: 0px; 
 
    text-align: center; 
 
    height: 4rem; /* Full height */ 
 
    max-height:18rem;  
 
     overflow: auto; 
 
} 
 

 
.buttons{ 
 
    float:right; 
 
} 
 

 
.confirmation-message { 
 
    overflow: auto; 
 
    margin: 20px 0 0 30px; 
 
    font-size: 1.2rem; 
 
    font-weight: 400; 
 
    float:left; 
 
} 
 

 
.clear{ 
 
    clear:both; 
 
}

<div class="confirmation-modal"> 
 
    <div class="confirmation-raised-panel"> 
 
     <div class="confirmation-message"> 
 
      This is a big message that takes up a bunch of space. Yes indeed. Do you like it? 
 
     </div> 
 
     <div> 
 
      <div class="buttons">   
 
       <button>Yes, I'm Sure</button> 
 
       <button>Cancel</button> 
 
      </div> 
 
       <br class="clear"/>  
 
     </div> 
 
    </div> 
 
</div>

Answer 1

、あなたは外側の2つの容器にheight: 4rem;を持っている - これは、任意の上位を得ることからそれらを防ぐことができます。それを削除するか、min-heightことを確認し、あなたがすべて設定されています。

.confirmation-modal { 
 
    z-index: 1; 
 
    /* Sit on top */ 
 
    width: 100%; 
 
    /* Full width */ 
 
    min-height: 4rem; 
 
    max-height: 18rem; 
 
    overflow: auto; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
} 
 

 
.confirmation-raised-panel { 
 
    background-color: #ffed83; 
 
    padding: 0px; 
 
    text-align: center; 
 
    min-height: 4rem; 
 
    max-height: 18rem; 
 
    overflow: auto; 
 
} 
 

 
.buttons { 
 
    float: right; 
 
} 
 

 
.confirmation-message { 
 
    overflow: auto; 
 
    margin: 20px 0 0 30px; 
 
    font-size: 1.2rem; 
 
    font-weight: 400; 
 
    float: left; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<div class="confirmation-modal"> 
 
    <div class="confirmation-raised-panel"> 
 
    <div class="confirmation-message"> 
 
     This is a big message that takes up a bunch of space. Yes indeed. Do you like it? 
 
    </div> 
 
    <div> 
 
     <div class="buttons"> 
 
     <button>Yes, I'm Sure</button> 
 
     <button>Cancel</button> 
 
     </div> 
 
     <br class="clear" /> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

あなたのモーダル（height: 4rem）のための固定の高さを持って、彼が展開することはできません。

.confirmation-modal { 
 
    width: 100%; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    background-color: #ffed83; 
 
    overflow: hidden; 
 
} 
 

 
.confirmation-message { 
 
    margin: 1rem; 
 
    font-size: 1.2rem; 
 
    font-weight: bold; 
 
} 
 

 
.buttons{ 
 
    float: right; 
 
    margin: 0 1rem 1rem; 
 
}

<div class="confirmation-modal"> 
 
    <p class="confirmation-message">This is a big message that takes up a bunch of space. Yes indeed. Do you like it?</p> 
 
    <div class="buttons">   
 
    <button>Yes, I'm Sure</button> 
 
    <button>Cancel</button> 
 
    </div> 
 
</div>