随着以下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？
您需要将文本包装在一个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 ，则div将始终根据来计算其尺寸和位置.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句