将 div 置于屏幕外的顶部，仅显示 div 底部的特定高度

【问题标题】：Position div off screen to the top and only show specific height of bottom portion of the div将 div 置于屏幕外的顶部，仅显示 div 底部的特定高度
【发布时间】：2016-10-30 04:21:28
【问题描述】：

是否有任何 CSS 唯一的解决方案可以将 动态高度 div 置于屏幕顶部并仅在屏幕上显示 固定高度 底部？

查看图片以获得清晰的解释：

我知道这可以使用 javascript 完成，只需获取 div 的高度，然后将“top”属性设置为 div 的负高度 + 可见部分的高度，但我正在寻找一个非JS解决方案。

【问题讨论】：

您是要隐藏其中的某个百分比还是隐藏某个 px 值？
隐藏部分的高度会根据屏幕大小而变化，底部可见部分要固定，例如100px。

标签： html css web responsive-design

【解决方案1】：

如果你想让屏幕的某个百分比可见，那么你可以操纵隐藏容器的bottom：

.hidden {
  background: red;
  width: 200px;
  position: fixed;
  bottom: 95%; /* Leave 5% across top */
  left: 50%;
}

<div class="main">
  <div class="hidden">
    Header<br/>
    Header<br/>
    Header<br/>
    Header
  </div>
</div>

【讨论】：

关闭，但如果我希望可见部分是固定高度而不是百分比怎么办？
我不认为这在具有动态高度的纯 css 中是可能的。