新手上路，请多包涵

随着以下 HTML 和 CSS

 .container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

 <div class="container">
  <div class="full-height">
  </div>
</div>

内部 div 根据需要占据容器的整个头部。如果我现在向容器添加一些其他的流内容，例如：

 .container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
}
.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  background: blue;
}

 <div class="container">
  <div class="full-height">
</div>

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
  maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio cupiditate
  placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate quidem.
</div>

然后容器根据需要滚动，但是绝对定位的元素不再锚定到容器的底部，而是停在容器的初始可见底部。我的问题是；有没有办法让绝对定位的元素成为其容器的完整滚动高度而不使用 JS ？

原文由 Chris Meek 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 241

2 个回答

得票最新

社区维基

发布于
2022-12-15

✓ 已被采纳

您需要将文本包装在 div 元素中，并在其中包含绝对定位的元素。

 <div class="container">
    <div class="inner">
        <div class="full-height"></div>
        [Your text here]
    </div>
</div>

CSS：

 .inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

将内部 div 的位置设置为 relative 使其内部的绝对位置元素基于其位置和高度，而不是基于具有固定高度的 .container div。没有内部，相对定位 div ， .full-height div 将始终根据 .container f2c05cffc9ab7d0943b579070016d.533— 计算其尺寸和位置

 * {
  box-sizing: border-box;
}

.container {
  position: relative;
  border: solid 1px red;
  height: 256px;
  width: 256px;
  overflow: auto;
  float: left;
  margin-right: 16px;
}

.inner {
  position: relative;
  height: auto;
}

.full-height {
  position: absolute;
  top: 0;
  left: 0;
  right: 128px;
  bottom: 0;
  height: 100%;
  background: blue;
}

 <div class="container">
  <div class="full-height">
  </div>
</div>

<div class="container">
  <div class="inner">
    <div class="full-height">
    </div>

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur mollitia maxime facere quae cumque perferendis cum atque quia repellendus rerum eaque quod quibusdam incidunt blanditiis possimus temporibus reiciendis deserunt sequi eveniet necessitatibus
    maiores quas assumenda voluptate qui odio laboriosam totam repudiandae? Doloremque dignissimos voluptatibus eveniet rem quasi minus ex cumque esse culpa cupiditate cum architecto! Facilis deleniti unde suscipit minima obcaecati vero ea soluta odio
    cupiditate placeat vitae nesciunt quis alias dolorum nemo sint facere. Deleniti itaque incidunt eligendi qui nemo corporis ducimus beatae consequatur est iusto dolorum consequuntur vero debitis saepe voluptatem impedit sint ea numquam quia voluptate
    quidem.
  </div>
</div>

http://jsfiddle.net/M5cTN/

原文由 giaour 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基

发布于
2022-12-15

position: fixed; 将解决您的问题。例如，查看我对固定消息区域覆盖的实现（以编程方式填充）：

 #mess {
    position: fixed;
    background-color: black;
    top: 20px;
    right: 50px;
    height: 10px;
    width: 600px;
    z-index: 1000;
}

在 HTML 中

<body>
    <div id="mess"></div>
    <div id="data">
        Much content goes here.
    </div>
</body>

当 #data 变得比屏幕长时， #mess 保持其在屏幕上的位置，而 #data 在其下方滚动。

原文由 flaschbier 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

位置绝对滚动

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译