143

具有以下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？

4

6 回答 6

115

您需要将文本包装在一个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-heightdiv 将始终基于 计算其尺寸和位置.container。

* {
  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/

于 2013-07-15T14:59:06.447 回答
39

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下方滚动。

于 2014-09-28T21:46:51.143 回答
16

所以 gaiour 是对的，但是如果您正在寻找一个不随内容滚动但实际上是容器高度的全高项目，那么这里就是解决方法。有一个高度会导致溢出的父级，一个具有 100% 高度的内容容器和overflow: scroll，然后可以根据父级大小而不是滚动元素大小来定位兄弟级。这是小提琴：http: //jsfiddle.net/M5cTN/196/

和相关代码：

html:

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

CSS：

.container{
  height: 256px;
  position: relative;
}
.inner{
  height: 100%;
  overflow: scroll;
}
.full-height{
  position: absolute;
  left: 0;
  width: 20%;
  top: 0;
  height: 100%;
}
于 2015-03-20T20:47:42.367 回答
0

我遇到了这种情况，创建一个额外的 div 是不切实际的。我最终只是将full-heightdiv 设置为height: 10000%; overflow: hidden;

显然不是最干净的解决方案，但它的工作速度非常快。

于 2020-03-04T21:41:05.907 回答
0

并不是说其他​​答案有什么问题，只是为了好玩，我复制了原始片段，我所做的只是改变height了min-height，我不必在<div>任何地方添加另一个。

.container {
  position: relative;
  border: solid 1px red;
  min-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>

于 2021-12-21T06:30:47.340 回答
0 

.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>

于 2022-01-17T17:32:37.223 回答