首页自适应背景图，不用 js 实现高度为浏览器可见高度？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 4050 天前的主题，其中的信息可能已经有所发展或是发生改变。

载入的首页大图正好height是浏览器的高，看了下代码感觉不是js算出来的，用css怎么实现？
例子： https://bitcoinfoundation.org/

首页

载入

浏览器

14 条回复 • 2014-12-17 18:23:11 +08:00

wolfan

2014 年 12 月 16 日 via Android

min-height:100%
么？

ihuguowei

2014 年 12 月 16 日

background-size:cover

JoyNeop

2014 年 12 月 16 日

http://snook.ca/archives/html_and_css/vm-vh-units

lemonda

2014 年 12 月 16 日

.home .site-header .bg-image {
background-image: url("../img/bitcoin-bg-1.jpg");
background-position: center center;
background-size: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}

txlty

2014 年 12 月 16 日

测试的姿势不对。
把JS禁用，再看，效果没了。

pandada8

2014 年 12 月 16 日 via Android

height:100vh

linking

2014 年 12 月 16 日

@txlty you're right

lvwzhen

2014 年 12 月 16 日

100vh 才是对的

Slienc7

2014 年 12 月 16 日

body {
margin:0;
padding:0;
background: #000 url('imgs.jpg') center center fixed no-repeat;
-moz-background-size: cover;
background-size: cover;
}

ooh

2014 年 12 月 17 日

body {
background: url(../img/bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Grenadn

2014 年 12 月 17 日 via Android

需要把html元素和body元素设为height:100%，然后给body加上background，把它的background-size设为cover，over

kmvan

2014 年 12 月 17 日

这网站。。。居然是“沉浸式”顶栏。。。

fyh1807008

2014 年 12 月 17 日

正解 @JoyNeop
vh赞