gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 15:43:13 25 4
gpt4 key购买 nike

我有一个 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 放入外部样式表时,它在第一次显示时显示良好,但在我重新加载同一页面后,页面底部出现空白区域。例如样式.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;
}

我的.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>

如何纠正这个错误?任何帮助将不胜感激。

最佳答案

从页脚(在 css 中)删除高度后尝试。页脚将根据数据自动获取高度。

关于javascript - 我的 html 页面中页脚后出现空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25723203/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com