Question

问题：

我试图将我的标头高度设置为等于视口高度，并使用table / table-cell方法将嵌套内容垂直居中。当我将标头的父div（主要元素）的高度值设置为100％时，页脚会重新定位在标头下方，因为主要元素的高度仅限于视口高度，即使是clearfix。

我想避免的潜在解决方案：

在主要内容之前移动标头内容（可能的SEO 影响？）
将标头内容移动到标题中（使用CI框架，而不是选项）
使用vh units / JavaScript / jQuery（理想情况下我希望100％兼容浏览器）

我非常感谢您对此问题的任何帮助或见解。如果没有符合上述标准的纯CSS解决方案，我会选择最适合浏览器的解决方案。

代码片段解决问题：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

对于很多人来说，这似乎是a common problem。我担心目前最好的解决方案之一就是使用vh单位和this javascript 'buggyfill'，直到iOS Safari修复了他们的浏览器。

我知道您说您不想要vh或JavaScript解决方案，但表示您希望100％兼容浏览器。不幸的是，我们不能吃蛋糕，也不能吃。例证：Modernizr。

话虽如此，不要害怕使用我链接的那个buggyfill。它非常易于使用。这是一个演示CodePen：https://codepen.io/krabbypattified/pen/ZKaKJw/

没有“buggyfill”的网页：http://lab.gasteroprod.com/vub/index-ios-issue.html

与“buggyfill”相同的网页：http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok

（随时访问iOS Safari上的链接）

您网站的vh解决方案很简单。只需从height元素中删除main，然后将height: 100vh添加到.masthead。

CSS - 在垂直居中的内容下重新定位页脚

1 个答案: