相关疑难解决方法(0)

我正在构建一个登录页面,用户首先看到一个主要区域,其下方有一个页脚.向下滚动显示页脚是一个粘性标题,我的目标是使用纯CSS来实现这一点.为了获得主要内容和页脚的全屏外观,我将height属性设置为两个不同的值:92%和8%(使用vh也不起作用).无论height我在我的CSS中指定(不同的单位和所有),我的页脚div都没有坚持.一旦我删除该height属性它就按预期工作.

这是删除属性之前我的页面的屏幕截图height:

正如你所看到的,它并没有坚持:

删除height属性值后,它确实粘贴:

这是我的HTML:

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

#main {
  height: 92%;
}

#landing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

#landingContent {
  width: 20vw;
}

#footerNav {
  height: 8%;
  display: flex;
  align-items: center;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}

这是我(可能)相关的CSS:

<div id="main">
  <div id="landing">
    <div id="landingContent">
      <h1 class="logo">Logo</h1> …