Question

我最近在开发一个具有某种结构的项目，如：

<div class="parent">
   <div class="children">
       sample text
   </div>
</div>

.parent得到一个固定的高度，如700px，而.children应该是父对象底部的垂直对齐。所以我将父级设置为position:relative; height:700px，将子级设置为position:absolute; bottom:0;，问题是如果＆＃34;示例文本＆＃34;太长了，它延伸到父母之外？我们希望能够滚动，以便我们不会错过文本。但设置.parent overflow:scroll将无法正常工作，因为位置很重要。

Answer 1

我尝试了一些东西，发现将一些属性设置为.children喜欢

.children{
    max-height: 100%;
    overflow:scroll;
}

可以实现这个目标。我不知道是否有人遇到同样的问题，所以我只想分享这个问题。如果有人有更好的想法，请与我们分享，谢谢。

：）

Answer 2

让课程看起来像这样

.parent {
    position:relative;
    height:700px;
}
.children {
    overflow:scroll;
    position:absolute;
    bottom:0%;
}

似乎在fiddler中工作。底部的东西：0或0px不起作用，我不知道为什么。

干杯。

如何制作位置：绝对（垂直对齐底部）元素溢出：滚动？

2 个答案: