不带滚动条的HTML全屏侧_Html_Css

不带滚动条的HTML全屏侧

html css

不带滚动条的HTML全屏侧,html,css,Html,Css,我试图创建一个没有滚动条的全屏网站，但在定义页面边距时遇到了问题。以下是一个最起码的例子： html{ 保证金：0；填充：0；身高：100%；背景：黄色； } 身体{ 保证金：0；填充：0；身高：100%；最大高度：100%；背景：绿色； } h1{ 背景：灰色； } 标题1 只需将页边距放在顶部：0 我建议使用CSS重置来避免类似的问题。非常有名且简单。您的body元素是一个非浮动块元素，就像包含的h1元素一样。因此，主体元素的大小/位置适应其子元素h1，该子元素的边距（边距

我试图创建一个没有滚动条的全屏网站，但在定义页面边距时遇到了问题。以下是一个最起码的例子：

html{
保证金：0；
填充：0；
身高：100%；
背景：黄色；
}
身体{
保证金：0；
填充：0；
身高：100%；
最大高度：100%；
背景：绿色；
}
h1{
背景：灰色；
}


标题1

只需将

页边距放在顶部：0h1

上的code>
我建议使用CSS重置来避免类似的问题。非常有名且简单。
您的body
元素是一个非浮动块元素，就像包含的h1
元素一样。因此，主体
元素的大小/位置适应其子元素h1
，该子元素的边距（边距顶部）定义为默认值
您的问题有多种解决方案，一种是使body元素浮动。这样做的优点是（与删除h1上的边距相比），即使插入了具有边距的不同元素，我也将以相同的方式工作

html{
保证金：0；
填充：0；
身高：100%；
背景：黄色；
}
身体{
保证金：0；
填充：0；
身高：100%；
最大高度：100%；
背景：绿色；
浮动：左；
宽度：100%；
}
h1{
背景：灰色；
}

标题1
当启动一个新项目或作为一般规则，总是尝试重置浏览器“添加”的许多预定义css值。已经创建了一些“css重置”样式表，您可以通过谷歌搜索找到这些样式表，但对于一个简单的解决方案，您始终可以从以下开始：
* { margin: 0; padding: 0;}

然后，您可以始终添加影响文档中所有元素的附加规则，如“字体系列：无衬线”等。
这样，您就可以确保您有一个坚实的起点，而不会在浏览器中有太多不同的外观
稍后，您可以将规则更明确地添加到需要设置样式的元素中
这就是我制作全屏网站的方式，它非常简单和干净：
<body>

<h1>Main heading</h1>

</body>

因此，如果你给你的身体一个100vh（视区高度）的高度，它将保持窗口的100%，不管它的大小。这样你就不会有滚动条的问题。
这就是为什么经常在项目中添加类似的内容，以避免在不同的浏览器中使用这些内容等。height:100vh将起作用。要使用滚动条，还可以使用overflow-y:hidden或溢出-x：隐藏根据情况而定。
尝试以下方法：
.img-responsive { background-size: 100%; }
OR

.img-responsive { background-size: cover; }

使用背景图像作为全屏图像，而不是img标签。
<header>
  <div class="menu_area">...</div>
</header>


html, body, header {
    height: 100%;
}
header {
    background-image: url('images/image1.jpg');
    background-size: cover;
}


...
html、正文、标题{
身高：100%；
}
标题{
背景图像：url（'images/image1.jpg'）；
背景尺寸：封面；
}
试试谷歌搜索“折页边距”。
<header>
  <div class="menu_area">...</div>
</header>


html, body, header {
    height: 100%;
}
header {
    background-image: url('images/image1.jpg');
    background-size: cover;
}