为什么我的 class 没有填满 100% 的屏幕？
[英]Why my class doesn't fill 100% of the screen?
问题描述
I have the following script in my html file:
我的html文件中有以下脚本：
<template name="SideNav">
<header>Lammah</header>
<body>
dd
</body>
<div class="nav">
<a href="#"><i class="fa fa-user-circle"></i></a>
<a href="#"><i class="fa fa-upload"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
</div>
</template>
And below is the .css file:下面是.css文件：
.nav {
border-radius: 5px 5px 0px 0px;
overflow: hidden;
background-color: #b7b7e5;
position: fixed;
bottom: 0;
width: 100%;
}
.nav a {
float: left;
width: 25%;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
a:hover{
background-color: #A3A3CC;
}
When I run the html file, the nav class doesn't start from the beginning of the screen, there is small white space on the left as it is shown in the picture below: the result当我运行 html 文件时， nav class 并没有从屏幕的开头开始，左侧有小的空白区域，如下图所示：结果
What is causing the nav class to not start from the beginning of the screen (bottom left)?是什么导致nav class 无法从屏幕开头（左下角）开始？
3 个解决方案
解决方案1
1 2020-05-16 10:41:09
When I run the html file, the nav class doesn't start from the beginning of the screen, there is
This is because by default the client/main.css contains the following lines:这是因为默认情况下client/main.css包含以下行：
body {
padding: 10px;
font-family: sans-serif;
}
You should remove it in order to remove the white space.您应该删除它以删除空白。
Furthermore some additions on your Template:此外，在您的模板上添加了一些内容：
The head and body should only be in your client/main.html while the body content will be rendered using the templates. head和body应该只在您的client/main.html中，而主体内容将使用模板呈现。 This is, because Blaze is focused to develop single page applications.这是因为 Blaze 专注于开发单页应用程序。
So your code client/main.html may be like the following:所以你的代码client/main.html可能像下面这样：
<header>
<title>Lammah</title>
</header>
<body>
{{> SideNav }}
</body>
<template name="SideNav">
<div class="nav">
<a href="#"><i class="fa fa-user-circle"></i></a>
<a href="#"><i class="fa fa-upload"></i></a>
<a href="#"><i class="fa fa-eye"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
</div>
</template>
解决方案2
0 2020-05-15 23:26:38
The default margins and padding are still in place.默认边距和填充仍然存在。 What you will need is to make sure the parent element has margins and padding set to 0. So for example, the very first css element you will want to set based off your above code would be this:您需要确保父元素的边距和填充设置为 0。因此，例如，您要根据上述代码设置的第一个 css 元素是这样的：
template {
margin: 0;
padding: 0;
}
解决方案3
0 2020-05-16 07:28:34
try this one试试这个
margin: 0 !important;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.