[英]Why my class doesn't fill 100% of the screen?
我的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>
下面是.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;
}
当我运行 html 文件时， nav class 并没有从屏幕的开头开始，左侧有小的空白区域，如下图所示：结果
是什么导致nav class 无法从屏幕开头（左下角）开始？
当我运行 html 文件时，导航 class 不会从屏幕的开头开始，有
这是因为默认情况下client/main.css包含以下行：
body {
padding: 10px;
font-family: sans-serif;
}
您应该删除它以删除空白。
此外，在您的模板上添加了一些内容：
head和body应该只在您的client/main.html中，而主体内容将使用模板呈现。 这是因为 Blaze 专注于开发单页应用程序。
所以你的代码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>
默认边距和填充仍然存在。 您需要确保父元素的边距和填充设置为 0。因此，例如，您要根据上述代码设置的第一个 css 元素是这样的：
template {
margin: 0;
padding: 0;
}
试试这个
margin: 0 !important;
连接到42英寸屏幕时，为什么我的HTML表格没有填满整个屏幕？
[英]Why doesn't my HTML table fill up the entire screen when connected to my 42" screen?
为什么 height: 100% 不能将 div 扩展到屏幕高度？
[英]Why doesn't height: 100% work to expand divs to the screen height?
固定 div 高度：在移动设备上滚动未填满屏幕时为 100%
[英]Fixed div height:100% on mobile devices when scrolling doesn't fill screen
与父容器相比的SVG大小。 为什么不100％最小高度填充父级？
[英]SVG size in comparison to parent container. Why doesn't 100% min-height fill parent?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.