绝对位置+滚动

102

随着以下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？

html css

— 克里斯·米克
source

我能问一下你为什么有top：0吗？还有吗？

— Patsy Issa 2013年

没什么特别的原因，我有过分说明的习惯

— 克里斯·米克

如果将top: 0;其删除，将无法正常工作。

— 布鲁尔

没有JS来计算innerHeight，那将很难。不幸的position:fixed是不能在容器内部工作，因为它不在流程中，所以这种“解决方法”也无法工作:(

— RaphaelDDL

90

您需要将文本包装在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/

— 贾古尔
source

当然，这实际上也有某种意义（以任何CSS都有意义；））

— Chris Meek

7

该fill-height元素显然与内容滚动，也没有在OP希望它锚定？（通过将蓝色背景更改为背景图像，您可以明白当我说它不是锚定jsfiddle.net/M5cTN/82时的意思）

— paulvs 2014年

34

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
source

66

固定的位置将使元素相对于浏览器定位，这可能不是预期的结果。

— Avand Amiri 2014年

如果未指定top，left，right，bottom位置固定元素，则不会相对于窗口定位。但这当然具有有限的用法，仅默认为左上角位置，否则它将相对于窗口定位，这还有另一个缺点，宽度：100％或高度：100％将与窗口的尺寸相同

— Herbi Shtini

1

transform: translate3d(0,0,0);在父母身上会导致position: fixed变得相对于父母。来源coderwall.com/p/2wzj-a/...

— lkraav

9

因此，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%;
}

— 托兰斯·斯科特
source

不幸的是，如果蓝色div放置在其容器的右侧，则会隐藏其滚动条。

— papillon

0

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

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

— 蒂博尔·乌德瓦里（Tibor Udvari）
source