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