jquery - 使 div 适合视口(viewport)

Question

我正在尝试让容器 ".works-wrap" 适应“查看更多”图标位于视口(viewport)底部的位置。

正如图片所示，但为了实现这一点而无需缩小等，这只是为了展示我想要的效果。

将内容设为绝对内容，然后会丢弃粘性页脚。

如果有 CSS 或 jquery 方法，我愿意接受。

谢谢。

Answer 1

可以使用新酷CSS3 viewport sized metrics实现这一目标。

See this example fiddle .我使用了具有以下核心样式的静态 div:

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

1vh 定义为“当前视口(viewport)高度的 1%”。所以 calc(100vh - 100px) 在这种情况下解析为“单个视口(viewport)高度底部上方 100 像素”。您可以调整 fiddle 界面右下面板的大小，以查看红点始终位于第一页的底部中心。

对视口(viewport)指标的支持是 pretty good , 甚至支持 IE9。