删除身体和页脚之间的奇怪空间html

问题描述：

我是新来的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

答

请试试这个。因为在格主体和页脚之间不必要的空格结束一些点字符是可见的，即（.............）

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>

您好，非常感谢！虽然，你能指出我改变了哪一部分吗？我找不到它。 – reiallenramos

我接受了你的回答。我意识到你没有改变代码中的任何东西。你知道为什么有不需要的字符？这是它第一次发生，我一直在用不同的语言使用SublimeText。 – reiallenramos

@reiallenramos我已经移除了在代码片段中可见的doted字符。错误地输入了额外的字符，这在崇高中是不可见的，因为你还没有安装插件。为此请按此链接https://github.com/TuureKaunisto/highlight-dodgy-chars –

答

这里是与你的问题HTML Look into this screenshot problem is with you html try using footer inside your body tag

Here is the working fiddle

<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> 
    <footer>footer here</footer> 
</body>

删除身体和页脚之间的奇怪空间html

相关推荐