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

У меня есть веб-сайт на основе 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>

Спасибо


html css responsive-design height material-design-lite
person Félix Desjardins    schedule 18.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо того, чтобы устанавливать фиксированную высоту 100 пикселей, установите ее на min-height:100px.

person ramesh    schedule 19.07.2015
comment
О, все в порядке. CodePen не очень хорошо отобразил его, но теперь он выглядит лучше и функциональнее. Спасибо! - person Félix Desjardins; 19.07.2015
comment
Тогда почему бы вам вообще не убрать высоту? div с непрозрачным фоном будет занимать высоту своего содержимого. - person ramesh; 19.07.2015