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

Question

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

Potential solutions that I'd like to avoid: 我想避免的潜在解决方案：

Moving the masthead content before the main content (Possible SEO impact?) 将标头内容移到主要内容之前（可能对SEO产生影响吗？）
Moving the masthead content into the header (Using CI framework, not an option) 将标头内容移动到标头中（使用CI框架，不是一种选择）
Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally) 使用vh单元/ JavaScript / jQuery（理想情况下，我希望浏览器具有100％的兼容性）

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. 如果没有满足上述条件的纯CSS解决方案，我将选择最适合浏览器的解决方案。

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>

Answer 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. 恐怕目前最好的解决方案之一是将vh单元与此JavaScript“ buggyfill”一起使用，直到iOS Safari修复其浏览器为止。

I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. 我知道您说过您不想要vh或JavaScript解决方案，但您确实说过想要100％浏览器兼容性。 Unfortunately we can't have our cake and eat it, too. 不幸的是我们也不能吃蛋糕。 Case in point: Modernizr. 例子：Modernizr。

That being said, don't be afraid to use that buggyfill I linked to. 话虽这么说，不要害怕使用我链接到的buggyfill。 It's very easy to use. 它很容易使用。 Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/ 这是一个演示CodePen： https ://codepen.io/krabbypattified/pen/ZKaKJw/

A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html 不含“ buggyfill”的网页： http ://lab.gasteroprod.com/vub/index-ios-issue.html

Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok 带有“ buggyfill”的网页： http ://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok

(feel free to visit those links on iOS Safari) （可以在iOS Safari上随意访问这些链接）

The vh solution for your website is simple. 您网站的vh解决方案很简单。 Just remove the height from the main element and add a height: 100vh to the .masthead . 只需从main元素上移除height ，然后向height: 100vh添加height: 100vh .masthead 。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-05-07 01:48:10

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-05-07 01:48:10

解决方案1
1 已采纳 2017-05-07 01:48:10