位置绝对 + 滚动 - 开卷题库

小开

最佳答案

您需要将文本包装在 div元素中，并在其中包含绝对定位的元素。

<div class="container">
<div class="inner">
<div class="full-height"></div>
[Your text here]
</div>
</div>

传真:

.inner: { position: relative; height: auto; }
.full-height: { height: 100%; }

将内部 div 的位置设置为 relative会使其内部的绝对位置元素将它们的位置和高度基于该位置，而不是基于具有固定高度的 .container div。没有内部，相对定位的 div，.full-height 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>

Http://jsfiddle.net/m5ctn/

小开

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在屏幕下滚动。

小开

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

小开

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

显然不是最干净的解决方案，但它的工作真的很快。

小开

并不是说其他答案有什么问题，只是为了好玩，我复制了原始的片段，所有我改变的是 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>

小开

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

小开

.bottomDiv {
position: relative;
bottom: 0;
}


.parentDiv {
display: flex;
flex-direction: column;
}


.theDivPlacedOnTopofBottomDiv {
flex-grow: 1 !important;
}