将div屏幕关闭到顶部，仅显示div底部的特定高度

Question

是否有任何CSS解决方案可以将屏幕上的动态高度 div定位到顶部，并且只在屏幕上显示固定高度底部？< / p>

有关明确说明，请参阅图片：

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

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