How can I add a footer or any other content bellow a video that takes up 100% of the screen's height?

I’m trying to accomplish a very standard way of showing content with a video taking up 100% of the screen’s height and a footer bellow it.

Instead of (1) I’m getting (2):

enter image description here

HTML:

  <section class="home">
    <video src="movie.mp4" muted loop autoplay></video>
    <div class="overlay"></div>
  </section>

  <section class="footer">
  </section>

CSS:

.home {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100vh;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #111;
    color: #fff;
    z-index: 2;
}

.home video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1.0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0.0, 0.0, 0.0, 0.4);
}

.footer {
    position: relative;
    top: 1000;
    left: 0;
    width: 100%;
    height: 400px;
    z-index: 50;
    background: aqua;
}

How can I add a footer or any other content bellow a video that takes up 100% of the screen’s height?

>Solution :

Just remove:

.home {
    position: absolute;
    top: 0px;
    left: 0px;
}

.home video {
    position: absolute;
    top: 0;
    left: 0;
}

.footer {
    position: relative;
    top: 1000;
    left: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
}

Using position: absolute or position: fixed tells web browser to not "reserve" space in document structure for this element and makes your footer floating above video. According to https://www.impressivewebs.com/css-things-that-dont-occupy-space/These elements are taken out of the document flow, so elements that appear after them in the source order will not flow around or below them.

absolutepositioning

You have a simple layout and take a notice – div’s are elements that takes all of the page’s width by default and stack one under another so don’t use any positioning here.

Specify .home element width and style video to size all of the content space. To makes .home scale with browser and prevent to have a large black blank space remove home min-height) – height will scale automatically to content height so specify only overlay and footer height) – something like this should work (with small improvements to do):

* {
    margin: 0;
}

.home {
    width: 100%;
    padding: 0px;
    background: #111;
    color: #fff;
    z-index: 2;
}

.home video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1.0;
}

.overlay {
    height: 200px;
    width: 100%;
    background: "rgba(0.0, 0.0, 0.0, 0.4);"
}

.footer {
    height: 300px;
    z-index: 50;
    background: aqua;
}

Leave a Reply