位置div離屏頂部只顯示底部部分的具體高度

Question

是否有任何CSS唯一的解決方案將動態高度 div離開屏幕頂部並僅顯示固定高度底部它的一部分在屏幕上？

見有明確的解釋圖像：

我知道這是可以使用JavaScript通過簡單地獲取div的高度，然後在「頂」屬性設置到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>