显示隐藏溢出的 div 内容的底部答案

【问题标题】：showing the bottom of the div content with overflow hidden显示隐藏溢出的 div 内容的底部
【发布时间】：2014-01-10 23:22:04
【问题描述】：

基本上我得到了一个包含很多内容的 div，例如：

<div>
top of content </br>
some content </br>
some  content </br>
some  content </br>
some  content </br>
some  content </br>
some  content </br>
some  content </br>
bottom of content 
</div>

然后，我为 div 设置一个高度，然后溢出，所以它会“裁剪”div。像这样：

<style>
div{
height:100px;
overflow:hidden;
}
</style>

我想做的是，div 将显示内容的结尾，而不是顶部。

谢谢！

【问题讨论】：

标签： html css overflow crop

【解决方案1】：

为您的 div 提供一个 id（例如“myDiv”），然后通过 javascript 尝试：

document.getElementById("myDiv").scrollTop = document.getElementById("myDiv").scrollHeight;

【讨论】：

+1 是为了简单和相同的解决方案。刚刚为此创建了一个小提琴：link
它可以工作，但是当我在 Jquery 中使用它时，不知何故它不起作用

【解决方案2】：

这是可能的，但感觉有点 hacky。这有效，例如：

<style>
.first {
max-height: 30px;
overflow: hidden;
-webkit-transform: rotate(180deg);
}
.second {
float:right;
-webkit-transform: rotate(180deg);
}


</style>

<div class="first">
<div class="second">
blah blah<br/>
blah blah<br/>
</div>
</div>

您只是旋转第一个 div 并将其嵌套在另一个将内容旋转回来的 div 中。溢出隐藏了旋转的包含 div 的“底部”，并且内容被旋转。（这有点奇怪，但确实有效。）

【讨论】：