代码之家 › 专栏 › 技术社区 › Tom

固定位置div的内容即使设置了父级的最大高度也不会滚动?

css html javascript

Tom · 技术社区 · 2 周前

我想要一个固定位置的可切换div,放在屏幕底部,具有百分比最大高度(这里是50%)。然而,如果屏幕宽度缩小,其内容在溢出时无法正确显示滚动条。如果我正确地设置溢出,它就会工作 .container ,但这会滚动切换div,这是我不想要的。如果我设置 height: 100% 到 容器 ,但不管怎样,它的高度都是50%。我需要做些什么才能得到我想要的行为?

const content = document.querySelector(".content");
const toggle = document.querySelector(".toggle");
toggle.addEventListener("click", (e) => {
  if (content.style.display != "none") {
    content.style.display = "none";
    toggle.innerHTML = "â²";
  } else {
    content.style.display = "block";
    toggle.innerHTML = "â¼";
  }
});

.container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 50%;
  background-color: blue;
}

.content {
  height: 100%;
  overflow: auto;
}

<div class="other">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
</div>
<div class="container">
  <div class="toggle">â¼</div>
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
  </div>
</div>

1 回复 | 直到 2 周前

Christian 2 周前

您可能需要替换 height 的 .content 具有 height:50vh;

.content {
  height:50vh;
  overflow: auto;
}

并移除 max-height 在您的 .container :

.container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: blue;
}

这个 50vh 将作为蓝色区域的固定高度(+切换),因此您不需要 最大高度 在您的 container . vh

只需调整 50vh 取决于您的需要。由于切换,蓝色内容看起来超过50%。蓝色区域的高度为50%内容+切换的高度。所以只需减少 50vh 如需要 46vh 等

const content = document.querySelector(".content");
const toggle = document.querySelector(".toggle");
toggle.addEventListener("click", (e) => {
  if (content.style.display != "none") {
    content.style.display = "none";
    toggle.innerHTML = "â²";
  } else {
    content.style.display = "block";
    toggle.innerHTML = "â¼";
  }
});

.container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: blue;
}

.content {
  height:50vh;
  overflow: auto;
}

<div class="other">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
</div>
<div class="container">
  <div class="toggle">â¼</div>
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
  </div>
</div>