1
저는 flexbox에서 HTML5와 CSS3을 처음 접했습니다. 본문과 바닥 글 사이에이 불필요한 공간을 제거하도록 도와주세요.몸과 바닥 글 사이에 이상한 공간을 제거하십시오. html
나는 여기서 stackoverflow와 google을 둘러 보았지만 아무 것도 효과가 없었다. 그들은 모두 내 이윤을 점검 할 것을 제안했고, 나는 그들 모두를 점검했지만 아무 소용이 없었다. div의 대부분에 대해 마진, 패딩 및 경계 조정을 시도했지만 여전히 범인을 찾을 수 없습니다.
크롬 :
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에서 얻은 것입니다. 또한 주석 중 하나에서 제안 된 것처럼 body 태그 안의 꼬리말을 이동했습니다.
편집 2 : 코드를 Codepen에 복사하여 이상한 문자를 보았습니다. 내가 그들을 삭제할 때, 그것은 나의 문제를 해결했다. 그러나 내 편집자 (나는 Sublime과 Notepad ++를 이미 시도했다)를 보면, 특별한 문자가 없다 !!! 이것은 나를 미치게 만든다.
내가 문제를 재현 할 수없는, 나를위한 공간이 없습니다. https://jsfiddle.net/461gac7L/. 이 문제가 특정 브라우저에서 발생합니까? –
'footer'는'body' 태그 안에 있어야합니다. –
@ SuperUser 시도, 작동하지 않았습니다. – reiallenramos