时间戳

首页 > 解决方案 > 如何创建一个占据整个屏幕并在滚动时折叠到标题的div

html - 如何创建一个占据整个屏幕并在滚动时折叠到标题的div

问题描述

我想创建一个跨越我设备的整个空间的 div，就像示例站点一样

我尝试做的是创建一个具有固定高度的标题，但无法在标题下方创建 div 以跨越剩余高度。

//Fixed Header
 .fixed-nav {
    position: fixed;
    width: 100%;
    height: 69px;
    background-color: #f2333a;
}

.x-div {
    position: relative;
    height: 100%;
    background-color: #F2333A;
    z-index: 10;
}

标签： htmlcss

解决方案

如果您希望导航下方的 div 跨越剩余高度，请使用height: calc(100vh - 69px)69px 可以是任何固定高度对象的高度。

body {
  margin: 0;
}

.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.fixed-nav {
  width: 100%;
  height: 69px;
  background-color: red;
  color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header {
  width: 100%;
  height: calc(100vh - 69px);
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: red;
  z-index: 1;
  margin: 0;
}

.more-content {
  height: 100vh;
  width: 100%;
  margin: 20px;
}
<div class="container">
  <nav class="fixed-nav">NAV</nav>
  <header class="header"></header>
</div>
<div class="more-content">Rest of webpage
</div>

推荐阅读