MDL中的適應性CSS高度

Question

我有一個基於MDL的網站，我在中間有一個大標題。我放了一個盒子，看到文字。

Here is the CodePen。

目標是，當人們調整窗口大小時，比如手機，箱子會在文本高度調整大小。

我們該怎麼做？

這是我的CSS;

.non-logged-in> .title-header-back { 
     position: fixed; 
     height: 100px; 
     padding: 16px; 
     background: rgba(0, 0, 0, 0.2); 
} 
.title-header { 
     color: #fff; 
} 

而我的HTML

<main class="mdl-layout__content mdl-typography--text-center"> 
    <div class="non-logged-in"> 
    <div class="title-header-back"> 
      <h1 class="non-logged-in title-header">Un bus à votre image</h1> 
    </div> 
    </div> 
</main> 

感謝

Answer 1

，而不是設置的100px的固定高度，將其設置爲min-height:100px。