我的html页面中的页脚后出现空白

Question

i have a html page,it's displaying well if i put my css code in the html.for example 我有一个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>

when i put this css into external stylesheet it displaying well in first time but after i reloading the same page the empty space occurs at bottom of the page.For example style.css 当我将此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 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>

how to correct this error? 如何纠正这个错误？ Any help will be greately appreciated. 任何帮助将不胜感激。

Answer 1

请尝试从页脚中删除高度（以CSS为单位）。页脚将根据数据自动获取高度。

我的html页面中的页脚后出现空白

问题描述

1 个解决方案

解决方案1
-2 2014-09-08 11:33:32

我的html页面中的页脚后出现空白

问题描述

1 个解决方案

解决方案1 -2 2014-09-08 11:33:32

解决方案1
-2 2014-09-08 11:33:32