信息消息引起designproblem

Question

想象我有

 <div class="infomessage"> 

      <p> message </p> 
      <p> message2 </p> 

     </div> 

由於我使用一些Ajax，有時會覆蓋此<div>與錯誤信息，設計將飛上下瘋狂（頂部和底部）。這些錯誤信息並不比上面那些2 <p>信息高或低，這就是我爲什麼要使用固定高度的原因。我需要使用什麼類型的css代碼來保持某種固定高度？

Answer 1

如果你想用一個固定的最低高度，您可以使用min-height設置最小高度爲元素無視它的內容：

.infomessage { 
 
    padding: 0 10px; 
 
    margin: 10px; 
 
    border: 1px solid; 
 
    min-height: 100px; /* <- */ 
 
}

<div class="infomessage"> 
 
    <p>message</p> 
 
    <p>message2</p> 
 
</div> 
 

 
<div class="infomessage"> 
 
    <!-- no content --> 
 
</div>

爲安博更多信息，請參閱MDN t min-height。

Answer 2

您應該添加min-height和max-height具有相同的值height