主页 / coding / 问题 / 79229911
Accepted
Meek
Asked: 2024-11-27 18:44:45 +0800 CST

如何解决 HTML 结构中自动扩展内容高度和视差页脚的问题

  • 772

我正在尝试制作一个结构，让内容区域自动扩展并溢出页脚，以产生视差效果。但是，我似乎找不到 100% 有效的解决方案。

min-height: 100vh;由于 ，我最终在页脚中出现了不可点击的链接<body>。有什么好方法可以解决这个问题吗？

body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
   height: 200px;
   background-color: red;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 500px;
  margin-bottom: 550px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 550px;
}
<header>Navigation</header>
<main>Content - auto grow</main>
<footer>Footer <a href="#">Link</a></footer>

html

1 个回答

  1. Best Answer

    您已设置z-index: -1;页脚。

    将其设为 0 会使链接可点击。

    body {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; 
  min-height: 100vh;
}

header {
  z-index: 1;
  height: 50px;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px;
  margin-bottom: 150px;
  background-color: #f90;
  box-shadow: 0 2rem 1rem -1rem rgba(0, 0, 0, .15);
}

footer {
  background-color: #ccc;
  position: fixed;
  z-index: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
}
    <header>Navigation</header>
<main>Content - auto grow</main>
<footer>Footer <a href="#">Link</a></footer>

    • 0

相关问题