Question

我试图在页面顶部制作一个全屏标题部分，但我无法让它适用于所有设备/监视器。这样做的行业标准是什么，javascript，css？我应该使用一套高度吗？现在，我的方式适用于除了移动设备之外的所有内容，它一再重复下来。

<body>
    <header>
         <h1>Logo</h1>
    </header>
    <div id="page">
         <p>content</p>
    </div>
</body>
<style>
    header {
          hieght:100vh;
          width:100%;
          background-image:url('image.png');
          background-size:cover;
    }
</style>

Answer 1

你需要定义100％意味着什么，现在它说标题的宽度是100％没什么。添加

body{
  width: 100%;
}

你也拼错了身高。

我将如何做到这一点。

<body>
    <header>
         <h1>Logo</h1>
    </header>
    <div id="page">
         <p>content</p>
    </div>
</body>
<style>
    body{
      width: 100%;
      height: 100%;
    }
    header {
          height:100%;
          width:100%;
          background: green;
          background-size:cover;
    }
</style>

Plunker here。将BG切换为绿色以使其可视化。

全屏标题部分

1 个答案: