Question

具有以下样式：

#fullpage-menu > .gradient {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.3rem;
}

其中 #fullpage-menu 具有样式：

#fullpage-menu {
    height: 100%;
    width: 100%;
    background-color: var(--secondary-button-color);
    left: 0;
    position: absolute;
    top: 0;
    animation: expand-fullpage-menu 500ms cubic-bezier(0.42, 0, 0.07, 1.43);
    z-index: 1001;
    animation-fill-mode: both;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    transform: translate(-100%);
    overflow-y: auto;
}

和

.apply-for-org .apply-button {
    background-color: var(--dark-secondary-button-color);
    padding: 0.5rem 1rem;
    border-radius: 10rem;
    border: none;
    cursor: pointer;
    color: var(--title-color);
    transition: all 300ms ease-out;
    user-select: none;
    display: block;
    clear: left;
    font-size: 1.3rem;
    text-transform: capitalize;
    font-family: bahnschrift;
    letter-spacing: 0.05em;
    margin: 1rem 0 0 1rem;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%);
    font-weight: lighter;
}

其中 .gradient 显示在每个全屏菜单的底部，.apply-button 显示在 .apply-for-org <div> 的底部，其 id 也是 {{ 1}}。

换句话说，#fullpage-menu 菜单底部应该有一个渐变条，如果内容高度超过屏幕高度，它应该在滚动 div 时停留在那里。

此外，对于整页菜单，HTML 将如下所示：

.apply-for-org

为什么这不起作用？为什么滚动浏览内容时渐变条和应用按钮不粘在屏幕底部？

编辑 15/04/2021：

<div id="fullpage-menu" class="apply-for-org">
  
  <!--Content and other cool stuff-->

  <button class="apply-button">Apply for Organisation</button>
  <div class="gradient"></div>
</div>

#fullpage-menu {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #121a21;
  overflow-y: auto;
}

#fullpage-menu > button.close {
  padding: 0.5rem 1rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  border-radius: 10rem;
  font-family: bahnschrift;
  background-color: #070b0e;
  border: none;
  color: white;
}

#fullpage-menu .gradient {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: rgb(131,58,180);
  background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1)     83%,   rgba(252,145,69,1) 100%);
}

.apply-for-org .apply-button {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%);
  background-color: #070b0e;
  border-radius: 10rem;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  font-family: bahnschrift;
  cursor: pointer;
}




/*Styling exclusive for this example*/

#example-content {
  height: 100rem;
  width: 70%;
  margin: auto;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  opacity: 0.5;
}

我还注意到它在我发布的代码片段中运行良好，但显然它在我的本地托管服务器上运行得不好..

如果重要的话，我使用 .ejs 而不是 .html，但它不应该有任何重要性（我相信）

Answer 1

对于在不久的将来遇到同样问题的任何人，可以通过将所有内容包装在另一个带有 position:block 属性的 div 中来解决：

<div id="fullpage-menu" class="apply-for-org">
  <div class="main-wrapper">
    <!--Place all the fancy content here-->

    <div class="gradient"></div>
    <button class="apply-button">Apply for Organisation</button>
  </div>
</div>

然后通过提供这些样式，一切都会起作用:)

#fullpage-menu {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #121a21;
  overflow-y: auto;
}


#fullpage-menu .gradient {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.2rem;
  background: rgb(131,58,180);
  background: linear-gradient(41deg, rgba(131,58,180,1) 0%, rgba(181,73,227,1) 28%, rgba(253,29,29,1)     83%,   rgba(252,145,69,1) 100%);
}

.apply-for-org .apply-button {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translate(-50%);
  background-color: #070b0e;
  border-radius: 10rem;
  border: none;
  color: white;
  padding: 0.5rem 1rem;
  font-family: bahnschrift;
  cursor: pointer;
}

/*This part is important!*/
.apply-for-org > .main-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

我不知道为什么，显然我的 CSS 和 HTML 知识太有限，或者我太愚蠢了，但至少这是有效的。如果没有包含所有内容的 .main-wrapper 元素，它将无法工作。

编辑： disinfor 提到了一些可能同样有效的方法，但还没有尝试过：

<块引用>

如果在父元素上设置转换属性，则固定元素可以相对于其父元素定位。尝试将 transform: translate(0,0) 添加到父元素。

位置：固定不会将元素固定在元素的底部

1 个答案: