粘溢溢出-自动消除间隙

发布于 2025-01-13 13:05:33 字数 1360 浏览 4 评论 0原文

我将这些内容与 overflow-auto 放在顶部和底部的 sticky 中。我希望粘性元素成为内容本身的一部分，并且没有额外的空间。

因为这是一个简单的示例，您可以使用使用 red 定义 background-color 的解决方法，但我不希望这样，它不能应用于我的复杂情况。

问题：

理想

.container {
  height: 200px;
  width: 200px;
  overflow: auto;
}

.content {
  height: 400px;
  width: 400px;
  background: red;
}

.stickie-top {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
}

.stickie-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

您可以看到以下示例： jsfiddle

原文

I have this content with overflow-auto and inside a sticky on top and bottom. I want the sticky elements to be part of the content itself and don't have an extra space.

Because this is a simple example you can use a workaround of define the background-color with red, but I don't want that, it cannot be applied to my complex case.

Problem:

Ideal

.container {
  height: 200px;
  width: 200px;
  overflow: auto;
}

.content {
  height: 400px;
  width: 400px;
  background: red;
}

.stickie-top {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  top: 0;
}

.stickie-bottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

You can see the example in this: jsfiddle

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小傻瓜 2025-01-20 13:05:33

使它们的高度等于 0。对于底部粘性，您将需要额外的 CSS 来纠正对齐方式

.container {
  height: 200px;
  width: 200px;
  overflow: auto;
}

.content {
  height: 400px;
  width: 400px;
  background: red;
}

.stickie-top {
  position: sticky;
  left: 0;
  top: 0;
  height:0;
}

.stickie-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  height:0;
  display:flex;
  align-items:flex-end;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

Make their height equal to 0. For the bottom sticky you will need extra CSS to rectify the alignment

.container {
  height: 200px;
  width: 200px;
  overflow: auto;
}

.content {
  height: 400px;
  width: 400px;
  background: red;
}

.stickie-top {
  position: sticky;
  left: 0;
  top: 0;
  height:0;
}

.stickie-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  height:0;
  display:flex;
  align-items:flex-end;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

回复收藏 0 原文

探春 2025-01-20 13:05:33

尝试下面的代码。这将有助于解决您的问题。

body{
  margin: 0;
}
.container {
  height: 200px;
  width: 200px;
  overflow: auto;
  background: red;
}

.content {
  height: 400px;
  width: 400px;
}

.stickie-top {
  position: fixed;
  left: 0;
  top: 0;
}

.stickie-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

Try the below code. It will help to solve your problem.

body{
  margin: 0;
}
.container {
  height: 200px;
  width: 200px;
  overflow: auto;
  background: red;
}

.content {
  height: 400px;
  width: 400px;
}

.stickie-top {
  position: fixed;
  left: 0;
  top: 0;
}

.stickie-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
}

<div class="container">
  <div class="stickie-top">Sticky top</div>
  <div class="content">Lorem ipsum ...</div>
  <div class="stickie-bottom">Sticky bottom</div>
</div>

回复收藏 0 原文

~没有更多了~