Adaptative CSS height in MDL

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.

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

score 1 · Accepted Answer · answered Jul 19 '15 at 00:00

1

Rather than setting a fixed height of 100px, set it to min-height:100px.

answered Jul 19 '15 at 00:00

ramesh

2,296
4
19
29

Oh it's ok. CodePen dosen't displayed it nicely, but it looks better now and functional. Thanks! – Félix Desjardins Jul 19 '15 at 00:17
Then why don't you remove height altogether? the div with the opaque background will take the height of its content. – ramesh Jul 19 '15 at 00:21

Adaptative CSS height in MDL

1 Answers1