全屏头部分 [英] full screen header section
本文介绍了全屏头部分的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在我的页面的顶部做一个全屏幕标题部分，但我不能得到它的所有设备/显示器工作。什么是这样做的行业标准，javascript，css？有没有一个设定的高度，我应该使用？现在我的方式工作在一切，除了移动设备，它一直重复下来的页面一次又一次。
Im trying to make a full screen header section at the top of my page, but I cant get it working for all devices / monitor. What is the industry standard for doing this, javascript, css? is there a set height I should just use? Right now my way works on everything but mobile devices it keeps repeating down the page again and again.
<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>
推荐答案
您需要定义什么100％这是说头的宽度是100％的什么。添加
You need to define what 100% means, right now it's saying the width of header is 100% of nothing. Add
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 此处。将BG切换为绿色以显示它。
Plunker here. Switched BG to green to visualize it.
这篇关于全屏头部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
