Адаптивная высота CSS в MDL

Question

У меня есть веб-сайт, основанный на леях, и у меня есть большой заголовок в центре. Я положил коробку позади, чтобы увидеть текст.

Вот 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,