我是 HTML5 和 CSS3 的新手，对 flexbox 更是如此。请帮我删除正文和页脚之间不需要的空间。
我在 stackoverflow 和 google 中四处查看，但没有任何效果。他们都建议检查我的 margin ，我确实检查了所有这些但无济于事。已尝试为大多数 div 调整边距、填充和边框，但我仍然找不到问题所在。
Chrome:
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;
}
Edit: This is what I get in Firefox. Also, moved the footer inside body tag, as suggested in one of the comments.
Edit 2: I copied my code to Codepen and saw these weird characters. When I deleted them, it solved my problem. But looking at my editor (I tried Sublime and Notepad++ already), there's no special characters!!! This is driving me crazy.
最佳答案
请试试这个。正文和页脚之间不需要的空间，因为在 div 末尾可以看到一些虚线字符，即 (................)
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;
}<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>关于html - 删除正文和页脚 html 之间的奇怪空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46640351/