制作 100% 高度图像背景？站点示例 andr*id.com

Question

我想设置 100% 自动高度。就像 android.com。这是我的尝试：

HTML

<div class="android-be-together-section mdl-typography--text-center">
      <div class="logo-font android-slogan">Hey Yah!</div>
      <div class="logo-font android-sub-slogan">SIPAK Online 2.0</div>

      <a href="#screens">
        <button class="android-fab mdl-button mdl-button--colored mdl-js-button mdl-button--fab mdl-js-ripple-effect">
          <i class="material-icons">expand_more</i>
        </button>
      </a>
    </div>

CSS

.android-be-together-section { position:relative; background:url(../images/cover.jpg) ; background-size: cover; background-position:center; height:100%;}

示例：www.android.com

Answer 1

如果 100% 可行，则将高度改为 100 vh。 Vh代表视口高度。

.android-be-together-section { position:relative; background:url(../images/cover.jpg) ; background-size: cover; background-position:center; height:100 vh;}

制作 100% 高度图像背景？站点示例 andr*id.com

make 100% height image background? Site example andr*id.com

html

css

background-image

HTML

CSS