Optimal viewing experience with organized sections in full-screen layouts

Question

Optimal viewing experience with organized sections in full-screen layouts

There are numerous ways to make a div cover the entire screen with a full-screen image in the background. However, most of them involve using min-height:100% and background-size:cover properties. This can sometimes cause other sections like the footer or header to "float" above the full-screen div.

For example:
https://i.sstatic.net/6hkEa.png

The left image shows what most solutions currently do, while the right image depicts the ideal scenario.

One solution is to use the vh units.

Are there any other CSS-only methods that would work across most browsers?

Thank you.
PS - Please excuse my lack of elegance in explaining this to you.

html css

Answer 1

Answer №1

Why should you avoid using 90% instead of 100% min-height? Take a look at this snippet of code:

body, html {
    height:100%;
    padding: 0;
    margin: 0;
    text-align: center;
    color:#FFF
}

.fullsection {
    height:90%;
    background:red;
}

.b { background:blue; }

.extra { height: 10%; }

footer {
    height:10%;
    background:black;
    position: fixed;
    width:100%;
    bottom: 0;
}

<div class="fullsection">A</div>
<div class="fullsection b">B</div>
<div class="extra"></div>
<footer>footer</footer>

Each fullscreen section takes up 90% of the page's height while the footer remains fixed at the bottom with 10% height. Additionally, an empty "extra" div is included to provide spacing for the footer when reaching the end of the page.

Answer 2

Why should you avoid using 90% instead of 100% min-height? Take a look at this snippet of code:

body, html {
    height:100%;
    padding: 0;
    margin: 0;
    text-align: center;
    color:#FFF
}

.fullsection {
    height:90%;
    background:red;
}

.b { background:blue; }

.extra { height: 10%; }

footer {
    height:10%;
    background:black;
    position: fixed;
    width:100%;
    bottom: 0;
}

<div class="fullsection">A</div>
<div class="fullsection b">B</div>
<div class="extra"></div>
<footer>footer</footer>

Each fullscreen section takes up 90% of the page's height while the footer remains fixed at the bottom with 10% height. Additionally, an empty "extra" div is included to provide spacing for the footer when reaching the end of the page.

Answer 3

Answer №2

Utilizing Flexbox for Layout

#viewport {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  flex: 1;
  background: #ddd;
}
.footer {
  flex-basis: 10%;
  background: #f00;
}

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

Setting Height Using Percentages

#viewport {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  height: 90%;
  background: #ddd;
}
.footer {
  height: 10%;
  background: #f00;
}

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

Answer 4

Utilizing Flexbox for Layout

#viewport {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  flex: 1;
  background: #ddd;
}
.footer {
  flex-basis: 10%;
  background: #f00;
}

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

Setting Height Using Percentages

#viewport {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.content {
  height: 90%;
  background: #ddd;
}
.footer {
  height: 10%;
  background: #f00;
}

<div id="viewport">

  <div class="content">

  </div>

  <div class="footer">

  </div>

</div>

Optimal viewing experience with organized sections in full-screen layouts

Answer №1

Answer №2

Utilizing Flexbox for Layout

Setting Height Using Percentages

Similar questions

Techniques for animating background image using jQuery

The margin-bottom CSS class is integrated within Twitter Bootstrap

Efficient scripting on Visual Studio

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

Having trouble tackling whitespace removal in the DIV? Usual methods seem ineffective?

AngularJS radio buttons can now be selected as multiple options

Personalizing Mat-Select Dimension - Angular 11

Unique styling for underlines in pop-up with custom CSS

The list in my "Hamburger" menu isn't loading properly

Tips for centering text with a Bootstrap switch

Interrupt the current with an external factor

The appearance of my HTML is distinct on Chrome for Windows and Safari for OSX

SVG to create a gradient mask that appears transparent

I have successfully implemented an onChange function with its corresponding set of parameters. However, I now desire to extend its functionality by incorporating

Elements are receiving CSS properties from other elements within the same component

Creating a CSS animation that smoothly slides across the screen and unveils a hidden text/div once the animation is complete

Struggling with a clash of styles between the float property and the navigation style in HTML

Effective ways to transmit a variable array from an HTML document to a PHP server

Troubleshooting CSS issues in HTML pages

Section of links spanning 4 columns in full-width