主页 / 问题 / 1049755
Accepted
Kaznachei
Asked:2020-11-24 00:04:19 +0000 UTC2020-11-24 00:04:19 +0000 UTC

滚动一个带有 position:fixed 的块，当它被同一个块重叠时

  • 772

有两个块。一个块包含文本，另一个块只有一个稍微透明的背景。块可以相互重叠，并且由于一个块有背景，它与文本重叠，文本块不会滚动。我希望当块相交时，带有文本的块有一个滚动

.down-box {
  position: fixed;
  top: 0;
  overflow: scroll;
}

.up-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: green;
  height: 50px;
  opacity: 0.5;
}
<div class="wrapper">
  <div class="down-box">
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
  </div>
  <div class="up-box">

  </div>
</div>

在此处输入图像描述 在此处输入图像描述

html

1 个回答

  1. Best Answer

    如果我理解正确..那么您想要制作块.down-box并.up-box划分屏幕的整个高度，同时.up-box始终被按下到屏幕底部..
    如果是这样，那么有几个选项..

    position: fixed;

    .down-box {
  position: fixed;
  top: 0;
  bottom: 50px; /* отступ равен высоте блока .up-box */
  max-height: 100%; /* ограничим блок по высоте */
  overflow: scroll;
}

.up-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: green;
  height: 50px;
  opacity: 0.5;
}
    <div class="down-box">
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
  SCROLL<br>
</div>
<div class="up-box"></div>

    flexbox

    body {
  margin: 0;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}

.down-box {
  display: block;
  width: max-content;
  max-height: 100%;
  overflow: scroll;
}

.up-box {
  width: 100%;
  background: green;
  height: 50px;
  opacity: 0.5;
}
    <div class="flex">
  <div class="down-box">
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL<br>
    SCROLL
  </div>
  <div class="up-box"></div>
</div>

    • 1

相关问题