Question

我在删除页脚中的幻像边距/填充时遇到问题。我创建了一个简单的网站来说明问题：

http://autodatanetwork.com/index-simple.html

具体而言，我很难在网站的最底部移除绿色~15px填充物。奇怪的是，如果我在最多15px的页脚添加填充没有任何反应。如果增加页脚填充超过页脚将会增长，但是＆＃34;幻像＆＃34;页脚消失。好像页脚上有一些最小高度。在此先感谢您的帮助。

html位于我为调试目的添加一些内联样式的地方。

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>Test simple</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="David Kohout & Tomáš Lach - www.tomaslach.cz">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="/favicon.ico">
        <link rel="apple-touch-icon" href="/apple-touch-icon.png">
        <link rel="stylesheet" href="css/main.css" media="screen,projection">
        <link rel="stylesheet" href="css/print.css" media="print">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script src="js/custom.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body style = "background: #F00; padding: 0px; margin: 0px;">
        <header>                       
        </header>
        <div id="content" style=" background:#0FF; padding-bottom: 1000px;">                
        </div>
        <!-- / #content -->      
        <footer style = "background: #000; padding-bottom: 5px; margin-bottom: 0px; " >
            <div class="wrap clearFix" style  = "background: #00F "  >
            </div>
        </footer>
    </body>
</html>

Answer 1

这是罪魁祸首（第36行）：

.clearFix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.字符导致了这个差距。将content: "."更改为content: ""。

或者，由于您明确设置了0的高度，因此您还可以添加overflow: hidden来隐藏差距。

作为附注，我建议将课程改为：

.clearfix:after {
    content: '';
    clear: both;
    display: table;
}

无法删除页脚上的边距/填充

1 个答案: