我不知道为什么页脚div不停留在页面底部？理想情况下，内容div应随其内部的实际内容量一起扩展，并且页脚应始终位于底部。我究竟做错了什么？
* {
margin: 0 auto;
font-family: 'Raleway', sans-serif;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.wrapper {
width:960px;
min-height: 570px;
margin:0 auto;
}
.header{
height:60px;
}
.nav {
height:30px;
border: 1px solid rgb(0,0,0);
border-left:
border-right:
}
.content {
width:100%;
}
.mainContent{
width:755px;
height:500px;
border: 1px solid rgb(0,0,0);
border-top: 0;
float:left;
overflow:hidden;
z-index: 0;
}
.sidebar{
width: 200px;
height:500px;
border: 1px solid rgb(0,0,0);
border-top:0;
border-left: 0;
float:right;
}
.footer{
height:100px;
width:958px;
border:1px solid rgb(50, 50, 50);
border-bottom: 0;
position: absolute;
bottom:0;
color:white;
background-color: rgb(60,60,60);
}
.clear{
clear:both;
}
li{
display:inline-flex;
padding:5px 40px 10px 40px;
}
input{
position: absolute;
top: -9999px;
left: -9999px;
}
label {
height:15px;
width:30px;
color:red;
background-color: white;
padding: 10px 20px 0px 20px;
border:1px solid rgb(0,0,0)
position:absolute;
bottom:0;
right:0;
}
input#Color {
position:absolute;
}
input#Color:checked + .wrapper {
background-color: rgb(0,0,0);
-webkit-background-color: rgb(0,0,0);
}
input#Color:checked + * {
background-color: rgb(0,0,0);
-webkit-background-color: rgb(0,0,0);
color:red;
}
input#Color:checked + .wrapper .nav {
-webkit-background-color: rgb(0,0,0);
border: 1px solid rgb(255, 0, 0);
}
input#Color:checked + .wrapper .content .mainContent {
-webkit-background-color: rgb(0,0,0);
border: 1px solid rgb(255, 0, 0);
border-top: 0;
color:red;
}
input#Color:checked + .wrapper .footer {
background-color: rgb(0,0,0);
-webkit-background-color: rgb(0,0,0);
border: 1px solid rgb(255, 0, 0);
color:red;
border-bottom: 0;
}<!DOCTYPE html>
<!-- DOCKMANN INDEX PAGE - CODE: D001 -->
<html>
<head>
<!-- CSS --><link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- JS --><script src="script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:300" rel="stylesheet">
</head>
<!-- END HEAD -->
<body>
<label for="Color">Red Eye</label>
<input type="checkbox" id="Color"/>
<div class="wrapper">
<div class="header">
test header
</div>
<!-- end header -->
<div class="nav">
<ul>
<li>
HOME
</li>
<li>
ALBUM
</li>
<li>
FILMS
</li>
<li>
SOCIAL
</li>
<li>
CONTACT
</li>
</ul>
</div>
<!-- end nav -->
<div class="content">
<div class="mainContent">
mainContent
</div>
<div class="sidebar">
Sidebar
</div>
</div>
<!-- end content -->
<div class="footer">
test footer
</div>
<!-- end footer -->
</div>
<!-- end wrapper -->
</body>
</html>您必须position:fixed让它停留在页面的底部position:absolute。将页脚的更改为，position:fixed以便始终将其固定在底部或
.wrapper {
width:960px;
min-height: 570px;
margin:0 auto;
position:relative;
}
因此页脚将相对于包装器定位
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句