主页 / coding / 问题 / 78977141
Accepted
MrUpsidown
Asked: 2024-09-12 16:11:13 +0800 CST

CSS 固定元素不会溢出父级

  • 772

我有一整页内容 ( .page-content)，底部有一个粘性页脚。我需要一个垂直分隔符（白线），占据 100% 的.page-content高度。这样就行了。

我还需要一个固定位置的分隔符（红线），占内容高度的 50%。这个也可以。

当滚动到页面底部时，我希望红色分隔符不会溢出.page-content元素。换句话说，我需要它不可见，就像白线一样。但我需要它固定在顶部（就像现在一样）。

我尝试了很多不同的方法，例如将固定元素放置在另一个绝对定位元素内，在元素overflow: hidden;上进行设置.page-content，但都没有任何帮助，红线总是溢出。

有没有办法可以用纯 HTML/CSS 实现这个目的？

body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.page-content {
  position: relative;
  min-height: 100vh;
  background: #eee;
  z-index: 1;
}

.content {
  padding: 2em;
}

.vertical-separator {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: #fff;
  z-index: 2;
}

.half-vertical-separator {
  position: fixed;
  top: 0;
  left: 50%;
  width: 3px;
  height: 50%;
  background-color: red;
  z-index: 3;
}

.page-footer {
  background: #444;
  color: #eee;
  position: sticky;
  bottom: 0;
  height: 100vh;
}
<div class="page-content">
  <div class="vertical-separator"></div>
  <div class="half-vertical-separator"></div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
</div>
<div class="page-footer">
  <div class="content">Footer</div>
</div>

html

1 个回答

  1. Best Answer

    这可以通过位置和负边距的组合来实现，sticky以隐藏元素占用的初始空间。

    body,
html {
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.page-content {
  position: relative;
  min-height: 100vh;
  background: #eee;
  z-index: 1;
}

.content {
  padding: 2em;
}

.vertical-separator {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 100%;
  background-color: #fff;
  z-index: 2;
}

.half-vertical-separator {
  position: sticky; /* This has changed to sticky */
  top: 0;
  left: 50%;
  width: 3px;
  height: 50vh; /* This has changed to using vh units to keep it proportional to the window */
  background-color: red;
  z-index: 3;
  margin-top: -50vh; /* This negates the original space taken up by a sticky element */
}

.page-footer {
  background: #444;
  color: #eee;
  position: sticky;
  bottom: 0;
  height: 100vh;
}
    <div class="page-content">
  <div class="vertical-separator"></div>
  <div class="half-vertical-separator"></div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
  <div class="content">Some content</div>
</div>
<div class="page-footer">
  <div class="content">Footer</div>
</div>

    • 3

相关问题