位置绝对+滚动

用下面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？

来源

2013-07-15 Chris Meek

可能我问你为什么有顶：0;还有吗？ –

没有特别的原因，我有一个过度指定事物的习惯 –

如果你删除'top：0;'它根本不起作用了。 – Brewal

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

来源

2013-07-15 14:59:06 giaour

当然，这实际上也有某种意义（就像任何CSS都有意义; ）） –

“fill-height”元素显然是随着内容滚动的，OP是不是希望它锚定？（通过将蓝色背景更改为背景图片，可以看到我的意思，当我说它不是锚定http://jsfiddle.net/M5cTN/82/） – paulvs

非常感谢。找到你的解决方案，经过数小时的搜索... –

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变长塔的sceen，#mess保持在其位置屏幕上，而#data在它下面滚动。

来源

2014-09-28 21:46:51 flaschbier

+24

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

如果您不指定顶部，左侧，右侧，底部位置固定元素将不会相对于窗口定位。但是，这当然有限制的使用，只有默认的左上方的位置，否则它将相对于窗口定位，它还有另一个缺点，宽度：100％或高度：100％将与窗口的尺寸相同 –

因此gaiour是正确的，但如果你正在寻找一个完整的高度项目，不与内容滚动，但实际上是容器的高度，这是修复。有一个父母的高度会导致溢出，一个内容容器的高度为100％，然后可以根据父母的大小定位兄弟，而不是滚动元素的大小。这里是小提琴：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-20 20:47:42 TorranceScott

位置绝对+滚动

回答

相关问题