全屏标题部分

时间:2014-02-08 00:16:04

标签: css html5

我试图在页面顶部制作一个全屏标题部分,但我无法让它适用于所有设备/监视器。这样做的行业标准是什么,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> 

1 个答案:

答案 0 :(得分: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切换为绿色以使其可视化。