全屏幕标题部分

我试图在页面顶部制作全屏幕标题部分，但无法使其适用于所有设备/显示器。什么是这样做的行业标准，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>

来源

2014-02-08 nick

高度应该是身高。 – Chanckjh

你需要定义什么是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切换为绿色以对其进行可视化。

来源

2014-02-08 00:18:03

全屏幕标题部分

回答

相关问题