删除正文和页脚 html 之间的奇怪空间答案

【问题标题】：remove weird space between body and footer html删除正文和页脚 html 之间的奇怪空间
【发布时间】：2018-03-20 07:16:38
【问题描述】：

我是 HTML5 和 CSS3 的新手，尤其是 flexbox。请帮我删除正文和页脚之间不需要的空间。

我在 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 中得到的。此外，按照其中一个 cmets 中的建议，将页脚移动到 body 标记内。

编辑 2：我将代码复制到 Codepen 并看到了这些奇怪的字符。当我删除它们时，它解决了我的问题。但是看看我的编辑器（我已经尝试过 Sublime 和 Notepad++），没有特殊字符！！！这真让我抓狂。

【问题讨论】：

我无法重现该问题，我没有空间。 jsfiddle.net/461gac7L 。这是否发生在特定浏览器上？
footer 应该在 body 标签内
@SuperUser 试过了，没用
@OvidiuUnguru 我不知道为什么。我正在使用 Chrome

标签： html css header margin footer

【解决方案1】：

请试试这个。正文和页脚之间不需要的空间，因为在 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>

【讨论】：

您好，谢谢，效果很好！虽然，你能指出你改变了哪一部分吗？我找不到它。
我接受了你的回答。我意识到您没有更改代码中的任何内容。你知道为什么会有不需要的字符吗？这是第一次发生，我一直在使用不同语言的 SublimeText。
@reiallenramos 我已经删除了 sn-p 代码中可见的点字符。错误地你输入了额外的字符，这在 sublime 中是不可见的，因为你没有安装插件。为此请点击此链接github.com/TuureKaunisto/highlight-dodgy-chars

【解决方案2】：

这是您的 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>

【讨论】：