Make a div at 100% height of its parent

Question

I have a video as the header of my website and I would like some text to appear on my entire video (with a half-transparent effect to be more readable). Unfortunately, it doesn't take the full height and I am not sure why.

How to change that?

I have put my example in a Fiddle

body {
  margin: 0;
}

.title-container {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

section {
  padding: 60px 0;
  overflow: hidden;
}

#bloc-video {
  padding: 0px 0px 0px 0px;
}

#myVideo {
  min-width: 100%;
  min-height: 100%;
}

.content {
  position: absolute;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  padding: 20px;
  top: 0;
  left: 0;
}

<section id="bloc-video">
  <div class="title-container">
    <video id="vid" loop muted autoplay>
                <source type="video/mp4" src="https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4">
            </video>
    <div class="content">
      <h1>Video title</h1>
      <p>Video text</p>
    </div>
  </div>
</section>
<main id="main">
  <section>
    <h1>
      Text below video
    </h1>
  </section>
</main>

you can also use grid instead absolute and eventually object-fit for the vidéo : https://jsfiddle.net/q2a5mys3/ — G-Cyrillus, Nov 25 '20 at 17:01

score 1 · Accepted Answer · answered Nov 25 '20 at 16:47

1

You need to put your .title-container class with a relative position.

.title-container {
   display: -ms-flex;
   display: -webkit-flex;
   display: flex;
   height:100%;
   position:relative;
}

answered Nov 25 '20 at 16:47

Tom Lima

1,027
1
8
25

score 1 · Answer 2 · answered Nov 25 '20 at 16:55

1

Use position:relative on .title-container

.title-container {
   display: -ms-flex;
   display: -webkit-flex;
    display: flex;
    position: relative;
 }

Here is the updated fiddle code jsfiddle code

answered Nov 25 '20 at 16:55

Imran Rafiq Rather

7,677
1
16
35

Make a div at 100% height of its parent

2 Answers2