0

The Problem:

I'm trying to set my masthead's height equal to the viewport height and vertically center the nested content using the table/table-cell method. When I set the height value of the masthead's parent div (the main element) to 100%, the footer repositions just below the masthead because the main element's height is limited to the viewport height, even with a clearfix.

Potential solutions that I'd like to avoid:

  • Moving the masthead content before the main content (Possible SEO impact?)

  • Moving the masthead content into the header (Using CI framework, not an option)

  • Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally)

I'd greatly appreciate any help or insight into this issue that you can offer. If there isn't a pure CSS solution that meets the above criteria, I'll select the most browser-friendly solution.

Code Snippet Demoing the Issue:

.clearfix:after,
.clearfix:before {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

*, :after, :before, html {
  box-sizing: border-box;
}

* {
  margin:0;
  padding:0;
}

html, body, .wrapper, main, .masthead, .masthead .section-content {
  height:100%;
}

body {
  background-color:#dddddd;
}

.section-content {
  background-color:#eeeeee;
}

header {
  position:fixed;
  top:0;
  left:0;
  right:0;
}

header, footer {
  height:61px;
  line-height:61px;
  background-color:white;
}

nav, .section-content, footer div {
  width:75%;
  margin-left:auto;
  margin-right:auto;
}

li {
  display:inline-block;
}

main {
  padding-top:61px;
}

section {
  padding-top:1rem;
  padding-bottom:1rem;
}

h1, h3, p {
  padding-bottom:1rem;
}

.centered-wrapper {
  display:table;
  height:100%;
}

.centered-content {
  display:table-cell;
  vertical-align:middle;
}
<body>
  <div class="wrapper">
    <header>
      <nav>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
        </ul>
      </nav>
    </header>
    
    <main class="clearfix">
      <section class="masthead">
        <div class="section-content">
          <div class="centered-wrapper">
            <div class="centered-content">
              <h1>
                Heading 1
              </h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus.</p>
            </div>
          </div>      
        </div>
      </section>
      
      <section>
        <div class="section-content">
          <h3>
          Section Header
          </h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
          
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
          
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
        </div>
      </section>
    </main>
    
    <footer>
      <div>
        <p>
          &copy; Tyler Fuller
        </p>
      </div>
    </footer>
  </div>
</body>
Tyler F.
  • 124
  • 1
  • 12

1 Answers1

1

This seems to be a common problem for many people. I'm afraid one of the best solutions at the moment is to use vh units with this javascript 'buggyfill' until iOS Safari fixes their browser.

I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. Unfortunately we can't have our cake and eat it, too. Case in point: Modernizr.

That being said, don't be afraid to use that buggyfill I linked to. It's very easy to use. Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/

A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html

Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok

(feel free to visit those links on iOS Safari)

The vh solution for your website is simple. Just remove the height from the main element and add a height: 100vh to the .masthead.

Community
  • 1
  • 1
Gabe Rogan
  • 3,343
  • 1
  • 16
  • 22
  • I think we actually can have our cake and eat it too, at least in this specific scenario. With vh only being incompatible with Opera Mini, and how easy it is to set the height of an element to viewport height with a few lines of JavaScript/jQuery, I wanted to know what percentage of Opera Mini users disable JS. After some Googling, I think it can't be disabled. So my ideal solution is to use vh, then use modernizr to detect vh compatibility, then run a JS function to set the height if vh isn't supported. What do you think? – Tyler F. May 07 '17 at 02:46
  • Yeah, I could just use buggyfill.js for an easy fix, but there would be a bunch of unnecessary js code not pertinent to my scenario that I could easily avoid. – Tyler F. May 07 '17 at 02:51
  • True. You can actually write javascript conditional to certain browsers though http://stackoverflow.com/questions/36653217/opera-mini-browser-detection-using-javascript . And you should be able to so something like that for Safari too. So maybe just do that instead of modernizr, and write your javascript inside that conditional, or even write javascript that appends a – Gabe Rogan May 07 '17 at 03:02
  • 1
    Wow, that kind of blew my mind. That advice is going to be incredibly useful to me now on. I like to use php to control which scripts are loaded based on the page/view, but it can't offer browser-specific script control. – Tyler F. May 07 '17 at 03:54