我是新来的HTML5和CSS3,甚至更多的flexbox。请帮助我删除身体和页脚之间的这种不需要的空间。删除身体和页脚之间的奇怪空间html
我环顾了这里在stackoverflow和谷歌,但没有任何工作。他们都建议检查我的利润率,我确实检查了所有这些,但无济于事。试图调整边缘,填充和边界的大多数divs,但我仍然无法找到罪魁祸首。
的index.html
<body>
<div>
<ul class="header flex-container">
<li class="nav flex-item">About</li>
<li class="nav flex-item">Links</li>
<li class="nav flex-item">Contact</li>
</ul>
</div>
<div class="content flex-container">
<div class="sidebar flex-item">Sidebar</div>
<div class="main flex-item">
This is the content<br />
This is the content<br />
This is the content<br />
This is the content<br />
</div>
<div class="sidebar flex-item">Sidebar</div>
</div>
</body>
<footer>footer here</footer>
的style.css
body{
margin: 0px;
font-family: sans-serif;
}
.flex-container{
/* flexbox properties*/
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flex-item{
/*flexbox properties*/
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.header{
height: 50px;
background-color: tomato;
margin: 0;
border-bottom: 3px solid rgba(0,0,0,0.3);
}
ul{
justify-content: flex-end;
}
.nav{
flex-direction: row;
margin: 2px;
padding: 0 10px 0 10px;
background-color: rgba(0,0,0,0.2);
color: white;
}
.content{
height: 300px;
margin: 0;
}
.sidebar{
background-color: grey;
flex: 1;
}
.main{
background-color: lightgrey;
flex: 2;
}
footer{
height: 50px;
border-top: 3px solid rgba(0,0,0,0.3);
background-color: tomato;
}
编辑:这是我在Firefox中得到的。另外,如其中一条评论所述,将页脚移动到身体标记内。
编辑2:我将我的代码复制到Codepen并看到这些奇怪的字符。当我删除它们时,它解决了我的问题。但看着我的编辑器(我已经试过Sublime和Notepad ++),没有特殊字符!这真让我抓狂。
我不能重现该问题,有没有我的空间。 https://jsfiddle.net/461gac7L/。这是否发生在特定的浏览器上? –
'footer'应该在'body'标签里 –
@SuperUser试过,没有工作 – reiallenramos