使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％＆＃39;。因此，calc(100vh - 100px)在这种情况下解析为单个视口高度底部上方的100个像素＆＃39;。您可以在小提琴界面上调整右下方面板的大小，看到红点一直粘在第一页的底部中心。

对视口指标的支持为pretty good，甚至支持IE9。