MDL中的自适应CSS高度

Question

I have a website based on MDL, and I have a big header, in the center. I put a box behind, to see the text.

Here is the CodePen .

The goal, is when people resize the window, such as mobile, the box get resized at the text height.

How can we do this?

This is my CSS;

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

And my 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>

Thanks

Answer 1

与其将固定高度设置为100px，不如将其设置为min-height:100px 。