如果不通过JS获取浏览器高度再计算，CSS有办法实现下面两个效果么？ gotinder.com 首页大图刚刚好是浏览器高度； snapchat.com 黄色高度刚好是浏览器高度。浏览器是有滚动轴的，交互上并不是纵向的Slide效果，也并不是真正意义上固定撑满全屏的效果，仅仅是视觉上的自适应撑满全屏。注意缩放浏览器和滚动轴看下效果~

很多设计精美的网页，第一屏背景图如何块级撑满用户可见浏览器的长宽？

盗盗

13381418

发布于
2016-07-11

更新于
2016-07-11

如果不通过JS获取浏览器高度再计算，CSS有办法实现下面两个效果么？

gotinder.com 首页大图刚刚好是浏览器高度；
snapchat.com 黄色高度刚好是浏览器高度。

浏览器是有滚动轴的，交互上并不是纵向的Slide效果，也并不是真正意义上固定撑满全屏的效果，仅仅是视觉上的自适应撑满全屏。注意缩放浏览器和滚动轴看下效果~

css html

阅读 4.9k

3 个回答

得票最新

无才狂士

5575

发布于
2016-07-11

这应该就是你想要实现的效果

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{height: 100%;margin:0}
        .div1{position: absolute;width: 100%;height: 100%;background: yellow}
        .div2{position: absolute;top: 100%; width: 100%; height: 500px; background: red}
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>