使div適合查看端口

Question

我試圖讓容器".works-wrap"適合點「查看更多」的圖標位於視圖端口的底部。

正如形象示人，但讓這種情況沒有我不得不縮小等，這只是表明我怎麼想它。

使內容絕對，然後拋出粘滯頁腳。

如果有CSS或jquery方法，我可以對任一方法開放。

謝謝。

Answer 1

你可以使用新的酷CSS3 viewport sized metrics來實現這一點。

See this example fiddle。我用靜態div用下面的芯造型：

#bottom { 
    position:absolute; 
    top:calc(100vh - 100px); 
} 

1vh被定義爲「當前視口的高度的1％」。因此在這種情況下，calc(100vh - 100px)解析爲'單個視口高度底部以上100像素'。您可以調整小提琴界面右下方的面板，以便看到紅點始終粘貼在第一頁的底部中央。

對視口指標的支持是pretty good，甚至支持IE9。