使用 100vh 内容居中的 HTML 全高英雄

Question

我有一个使用 100vh 和固定位置 header 的全高英雄单元组。

<div class="header">
  This is a fixed position header
</div>

<div class="first_section_container">
    <div class="first_section">
        <div class="first_section_content">
            <span>
                This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
              </span>
          </div>
    </div>
</div>

https://jsfiddle.net/dfn1m4kk/

我试图让跨度在 first_section div 中垂直居中，并考虑固定位置导航栏的高度。

Answer 1

试试这个

html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

.header{
  background:green;
  height:50px;
  width:100%;
  position:fixed;
  text-align:center;
  color:white;
  top: 0;
}

.first_section_container{
  height:100%;
}

.first_section{
  height: calc(100vh - 50px);
  background:#58585a;
  margin-top: 50px;
}

.first_section_content{
  height:100%;
  display: table;
  margin: 0 auto;
}

.first_section_content span{
  display: table-cell;
  width:400px;
  vertical-align: middle;
  text-align: center;
}

<div class="header">
  This is a fixed position header
</div>

<div class="first_section_container">
  <div class="first_section">
    <div class="first_section_content">
     <span>
       This is some test content that I would like to be vertically centered, the fixed position header is causing me some problems
     </span>
   </div>
 </div>
</div>

<div class="second_section">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nisl dui, gravida sed nisi id, sollicitudin placerat sapien. Nulla facilisi. Praesent sodales lorem quis est pulvinar, at consectetur ipsum tempus. Sed a lacus bibendum, ultrices odio non, fermentum nisl. Proin erat leo, venenatis in velit sed, molestie luctus nunc. Suspendisse quis aliquet odio. Etiam commodo nec neque quis viverra. Etiam nec justo ipsum. Morbi condimentum ipsum feugiat tincidunt semper.
  </p>
  <p>
    Ut vestibulum nulla dapibus vestibulum efficitur. Fusce vel augue ac est iaculis elementum vel et risus. Fusce imperdiet lacus eget lorem sodales consequat. Morbi porta risus sit amet massa auctor, vel rutrum augue porta. Quisque interdum est at ex placerat iaculis id sit amet felis. Maecenas accumsan turpis mattis nisi porttitor aliquet. Suspendisse suscipit magna vitae aliquet placerat. Nullam a facilisis mauris. Praesent ut orci vehicula, aliquet arcu eu, tempor arcu. Maecenas congue dui nisl, quis ultrices arcu aliquam ut. Pellentesque quis tincidunt mi. Duis rhoncus felis at mauris vestibulum malesuada.
  </p>
  <p>
    Nam in porttitor metus. In tristique, leo vitae facilisis facilisis, eros felis ornare neque, nec mollis velit sapien sit amet mauris. Fusce iaculis purus orci, id vehicula nisi facilisis in. Aliquam id nunc ac nisi feugiat cursus. Aliquam id orci at risus malesuada laoreet feugiat et mi. Integer laoreet lobortis nibh gravida euismod. Nulla facilisi.
  </p>
  <p>
    Phasellus maximus lacus quis ipsum tincidunt, ac dapibus turpis dignissim. Nunc sed odio ut arcu venenatis pharetra. Sed vel justo magna. Cras sagittis rutrum dapibus. Mauris quis dictum arcu, eu finibus felis. Nam dictum nibh gravida, mattis massa ac, varius urna. Vestibulum sodales ornare justo. Proin ac scelerisque odio, at euismod arcu. Quisque suscipit rhoncus porttitor.
  </p>
  <p>
    Donec mattis vestibulum lorem a pellentesque. Duis ut iaculis enim, a hendrerit felis. Proin finibus, leo non ornare elementum, nibh velit malesuada elit, eget pellentesque mauris nisl eu dolor. Morbi quis lobortis nisi. Proin convallis ipsum sed gravida dapibus. Aliquam fringilla ipsum vitae varius ornare. Pellentesque neque libero, congue ac lorem eget, faucibus fringilla risus. Integer semper, elit et posuere sagittis, est ante rutrum ligula, sed ornare magna ipsum et nibh.
  </p>
</div>