1
我不知道爲什麼頁腳div不粘在我的頁面底部？理想情況下，content div應該隨着其內容的實際內容的數量而擴展，並且footer應始終保持在底部。我究竟做錯了什麼？爲什麼我的頁腳不能錨定在頁面的底部？
* {
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>
你'.wrapper位置'缺少'位置：相對;'。 – AlexG