polymer 2.0如何让一个元素全面屏？

Question

我有一个名为 my-app 的元素，其主体和 html 设置为 100%。

在 my-app 中，我有另一个名为 background-section 的元素，其主体和 html 设置为 100%。在这个元素中，我有一个带有背景图像的部分。我希望这个背景图片是全屏的。

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('../../images/background-img2.jpg') no-repeat;
  background-size: 100%;
  box-sizing: border-box;
  height: 100%;
}

问题是，由于某种原因，图像没有全屏显示。不知道为什么会这样。

Answer 1

使用height:100vh和background-size: cover;得到相同的结果。

body, html {margin:0; padding:0;}

.background-section {
  width: 100%;
  background: linear-gradient( rgba(73, 77, 86, 0), rgb(73, 77, 86)), url('https://s-media-cache-ak0.pinimg.com/originals/90/6e/a5/906ea53ecaa5be963e960daf8b645af2.jpg') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  height: 100vh;
}

<section class="background-section">
  <!-- this is another element -->
  <nav-bar></nav-bar>
  <div class="opening-msg">
    <div class="app-container">
      <h1>Find a perfect <br /> property</h1>
      <span class="caption">
          Connecting landlords & tenants through an easy to <br /> use web
          application built for all devices
        </span>
    </div>
  </div>
</section>

polymer 2.0如何让一个元素全面屏？

How to make an element full screen in polymer 2.0?

html

css

polymer

custom-element

polymer-2.x