MDL中的自適應CSS高度

Question

我有一個基於MDL的網站，並且在中心有一個很大的標題。 我在后面放了一個盒子，看一下文字。

這是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 。