html - MDL の適応型 CSS の高さ

Question

MDL に基づく Web サイトがあり、中央に大きなヘッダーがあります。テキストを見るために、ボックスを後ろに置きました。

これが 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>

ありがとう