html - 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

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