下面是我在网页上设置背景的做法:
body {
height: 100vh;
background: linear-gradient(white, tan);
}
<h1>Heading</h1>
<p>Paragraph</p>
默认情况下,body标签的上、下、左、右边距为8px。默认情况下,h1标签的上边距和下边距为21.440像素或0.67em 因此,您需要设置正文边距:0和h1边距:0或上边距:0
如果你想只为整个身体设置背景色,这很好。如果你想知道更多关于背景属性的信息,请阅读这个CSS背景属性
body {
height: 100vh;
background: green;
margin:0;
}
h1{
margin-top:0;
}
<h1>Heading</h1>
<p>Paragraph</p>
您可以在正文中添加overflow:hidden来隐藏滚动条。
body {
height: 100vh;
background: green;
overflow: hidden;
}
<h1>Heading</h1>
<p>Paragraph</p>
我不知道你想做什么,但你可以像这样尝试“溢出:隐藏”:
body {
height: 100vh;
background: green;
overflow: hidden;
}
<h1>Heading</h1>
<p>Paragraph</p>
正如@Mostafa Baezid所说,正文有默认边距。
此外,由于垂直轴上的边距折叠,您需要确保最上面或最下面的元素的边距不会折叠,从而使边距超出父元素。
更何况100vh!= 100%,对于某些移动浏览器而言。手机浏览器的菜单栏会占用一些空间,100vh并不会减少这些空间。
那么该怎么办呢:
移除正文边距(上边距和下边距就足够了) 移除最上面元素的上边距和最下面元素的下边距。(可以用填充代替) 用身高:100%代替身高:100vh对于移动设备。 如果有人需要快速补救,我的解决方案很简单:从100vh的高度缩小到80vh的高度,去掉垂直滚动条。注意:我尝试了其他建议,但没有一个对我有效。