Question

使用以下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？

Answer 1

您需要将文本包装在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计算其尺寸和位置。

http://jsfiddle.net/M5cTN/

Answer 2

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

Answer 3

所以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%;
}

Answer 4

我遇到了这种情况，创建一个额外的div是不切实际的。我最终只是将<asp:Button ID="button" runat="server" Text="click me :)" /> div设置为full-height

显然不是最干净的解决方案，但是它的确非常快。

位置绝对+滚动

4 个答案: