我有一个绝对定位的页脚，当浏览器窗口调整大小时，它会向上移动并重叠内容。
这是HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>FOO</title>
<link href="../stylesheet/typo.css" rel="stylesheet" type="text/css">
<link href="../stylesheet/main.css" rel="stylesheet" type="text/css">
</head><body>
<div id="header">
<h1><br>Blah Blah</h1>
<h5 style="overflow:hidden">Foo</h5>
</div>
<div id="container">
<div class="loginbox">
<div class="innerlogin" align="left">
<span wicket:id="topPanel">
<h3>Please Login</h3>
<br><br>
<form style="margin:0">
<label for="name">Username</label><br>
<input type="text" name="name" class="styledinput" /><br>
<label for="password">Password</label><br>
<input type="password" class="styledinput" /><br><br>
<input type="submit" value="Login" class="login" />
</form>
</span></div>
</div>
<div class="contentbox">
<div class="rightcont">
<div id="content" align="left">LoremIpsum </div>
<img src="../images/imageright.png" style="margin-left:70px">
</div>
</div>
</div>
<div id="clearfix"></div>
<div id="footerhome">1400Labs
Legal Privacy
About Terms Help</div>
</body>
</html>
和CSS
body {
margin: 0px;
padding-bottom: 100px;
border-width: 0px;
height: 100%;
background: #e1d8d8;
}
#header {
width: 100%;
margin: 0px auto;
padding-left: 12.85%;
background-color: #205081; /*#4f4f4f#205081*/
position: relative;
height: 80px;
}
#footerhome {
position: absolute;
bottom: 0;
float: left;
width: 100%;
height: 100px; /* Height of the footer */
background: #fff;
font-size: 10px;
text-align: center;
margin-top: auto;
clear: both;
}
/*Heading Spans*/
h1 {
font-family: Arial;
color: #FFF;
margin: 0;
padding: 0;
}
h5 {
font-family: Arial;
color: #FFF;
margin: 0;
padding: 0;
}
h3 {
color: #205080;
font-family: Arial;
}
/*Menu Table*/
#menutable {
margin-top: 10px;
border-spacing: 25px;
background: #4f4f4f;
}
/*Content Divs*/
.loginbox {
width: 30.666%;
margin-top: 15%;
float: right;
margin-right: 12.5%;
display: inline;
}
.contentbox {
width: 30.666%;
margin-top: 15%;
float: left;
margin-left: 12.5%;
}
.rightcont {
position: relative;
width: 30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -20em border: 2px solid #ccc;
background: transparent padding-bottom:0px;
padding-top: 10px;
}
.innerlogin {
position: fixed width:30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em border: 2px solid #ccc;
padding-bottom: 0px;
background: transparent;
padding-top: 100px;
padding-left: 100px;
}
/*Form Elements*/
.login {
background: #205080;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
color: #FFF;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
rgba(0, 0, 0, 0.2);
height: 25px;
width: 60px;
"
}
label {
font-size: 12px;
font-family: Arial;
color: #205080;
text-align: left;
}
.styledinput {
border-radius: 4px
}
/*content*/
#content {
color: #205080;
font-size: 14px;
width: 320px;
margin-left: 100px;
}
#container {
width: 1000px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 20px;
clear: both;
margin-bottom: 100px;
}
#clearfix {
clear: both;
}
@media screen and (max-width: 1000px) {
.contentbox {
width: 30.666%;
margin-top: 15%;
float: left;
margin-left: 0%;
}
.loginbox {
width: 30.666%;
margin-top: 15%;
float: right;
margin-right: 12.5%;
margin-left: 0;
display: block;
}
#container {
width: 1000px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 20px;
clear: both;
margin-bottom: 100px;
margin-bottom: 100px;
}
}
页脚礼貌：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
的jsfiddle：http://jsfiddle.net/anirudhvarma/JLZzs/ 我希望我说清楚
答案 0 :(得分：0)
您可能希望通过
解决这个问题html {
height: 100%;
}
看看是否有帮助。
还引入了一个包装器div，底部有一个填充物以容纳页脚
<div id="wrapper">
<div id="header">
<h1><br>Blah Blah</h1>
<h5 style="overflow:hidden">Foo</h5>
</div>
<div id="container">
<div class="loginbox">
<div class="innerlogin" align="left">
<span wicket:id="topPanel">
<h3>Please Login</h3>
<br><br>
<form style="margin:0">
<label for="name">Username</label><br>
<input type="text" name="name" class="styledinput" /><br>
<label for="password">Password</label><br>
<input type="password" class="styledinput" /><br><br>
<input type="submit" value="Login" class="login" />
</form>
</span></div>
</div>
<div class="contentbox">
<div class="rightcont">
<div id="content" align="left">LoremIpsum </div>
<img src="../images/imageright.png" style="margin-left:70px">
</div>
</div>
</div>
<div id="clearfix"></div>
<div id="footerhome">1400Labs
Legal Privacy
About Terms Help</div>
</div> /* end wrapper */
的CSS：
#wrapper {
position:absolute;
top:0px;
left:0px;
padding-bottom:100px;
}
答案 1 :(得分：0)
从#footerhome中删除position: absolute;，或者您可以更改为position: relative;
答案 2 :(得分：0)
答案 3 :(得分：0)
以这种方式试试
<body>
<div id="wrapper">
<div id="header">
<h1> Header</h1>
<div id="content">
<p> text for content </p>
</div>
</div>
<div id="footer">
<p> text for footer </p>
</div>
</div>
</body>
CSS
body, html {
height: 100%;
}
p {
-moz-column-count:3;
-moz-column-width: 200px;
}
#wrapper {
margin:0 auto;
width: 75%;
height: 75%;
background: yellow;
}
#header {
min-height: 100%;
margin-bottom: -200px;
}
#footer {
background: red;
height: 200px;
}