Question

我不知道为什么页脚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>

Answer 1

您必须让position:fixed留在页面底部。将页脚的position:absolute更改为position:fixed，以便它始终固定在底部或

.wrapper {
width:960px;
 min-height: 570px;
margin:0 auto;
position:relative;
}

所以页脚将相对于包装器定位

Answer 2

按照下面的代码::: ---

您必须使用CSS的顶部或 margin-top 来指定它的位置。

＆＃13;

#foot{
  background-color: black;
  color: #fff;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
	<footer class="container-fluid" id="foot">
		<span class="col-sm-3 text-center">
			HOME
		</span>
		<span class="col-sm-3 text-center">
			CONTACT
		</span>
		<span class="col-sm-3 text-center">
			FILMS
		</span>
		<span class="col-sm-3 text-center">
			ABOUT
		</span>
	</footer>
</body>
</html>

＆＃13;

Answer 3

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1;
}

当然如果你想让页脚在滚动时保持在底部，你必须使用固定在最高z-index的位置

为什么我的页脚没有固定在页面底部？

3 个答案: