Question

我有一个html页面，如果我将我的css代码放在html中，它会显示得很好。例如

<html>
<head>
<style>
html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}
</style>
</head>
<body>
    <div id="wrapper">
        <div id="header">My header</div>
        <div id="content">

        Content



        </div>
        <div id="footer">My Footer</div>
    </div>
</body>
</html>

当我把这个css放到外部样式表中时它在第一次显示得很好但是在我重新加载同一页面后，空白空间出现在页面底部。例如的style.css

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

my.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>How To Keep Your Footer At The Bottom of The Page - CSSReset.com</title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />  





</head>

<body>

    <div id="wrapper">

        <div id="header">
             header
        </div><!-- #header -->

        <div id="content">
        content
        </div><!-- #content -->

        <div id="footer">
        footer
        </div><!-- #footer -->

    </div><!-- #wrapper -->

</body>

</html>

如何更正此错误？任何帮助都将受到高度赞赏。

Answer 1

从页脚移除高度后尝试（在css中）。根据数据自动获取高度。

在我的html页面中页脚后出现空格

1 个答案: