标题显示我有一个页脚，我想用我的内容移动。基本上，我有一些文本，当浏览器被推到较小的宽度时，内容会在页脚下面，当我希望页脚向下移动内容时。让它不仅仅是保持一个位置。
我已经完成了大部分代码并删除了不需要的定位，但如果我尝试在.footerwrap上将其设置为0，它会在页面中随机浮动。希望你们能帮忙。
我会链接我的html和CSS，这样你就可以得到一个想法。不幸的是，该网站并不存在，但它可能是一个简单的解决方案。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</div><!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div><!--close logo-->
</div><!--close header!-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">PORTFOLIO</a></li>
<li><a href="manga.html">CONTACT</a></li>
</ul>
</div><!--close menu!-->
</div><!--close headerwrap!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
<div class="fader">
<img class="bottom" src="images/dsas.png"/>
<img class="top" src="images/dsa.png"/>
</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">
<div class="textwrap">
<div class="contentspace">
</div><!--close contentspace!-->
<div class="content">
<p>Specializations</p>
<p>With various skills in branding, multi-media
and advertising I am able to provide fresh and inspiring solutions
for the task given to me. Using various programs such as:</p>
</div><!--close content!-->
<div class="divider">
<img src="images/divide.png"/>
</div><!--close divider!-->
<div class="content2">
<p>Why me?</p>
<p>The work I create is reflecting something
fresh and exciting in order to meet the clients
needs. About pushing for new and innovative ideas
and pushing for an end result of brand and product growth</p>
</div><!--close content2!-->
<div class="contentspace">
</div><!--close contentspace!-->
</div><!--close textwrap!-->
</div><!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div><!--close footerwrap!-->
</div><!--close wrapper!-->
</body>
</html>
@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
background:#171717;
margin:0;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
margin: 0 auto;
width:100%;
height:auto;
}
/*---------------------------- Header ----------------------------*/
.headerwrap{
position:relative;
background:#171717;
-moz-box-shadow: 0px 10px 20px 0px #333 ;
-webkit-box-shadow: 0px 10px 20px 0px #333 ;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.header{
position:relative;
right:120px;
min-height:180px;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.logo{
position: absolute;
min-width:60px;
top:4%;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social{
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img{
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu{
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Image Fader ----------------------------*/
.fader {
width:100%;
z-index:1;
}
.fader img {
position:absolute;
width:100%;
height:500px;
max-height:1000px;
min-height:200px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@keyframes faderFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
.fader img.top {
animation-name: faderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;*/
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
position:relative;
top:500px;
width:100%;
z-index:500;
background:#171717;
height:290px;
min-height:212px;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
.textwrap{
position:relative;
width:100%;
top:40px;
height:190px;
}
.content,
.divider,
.content2 {
text-align:center;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.divider{
height:200px;
width: 24%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
.divider img{
display: block;
margin-left: auto;
margin-right: auto;
}
.content,
.content2 {
height:200px;
width: 15%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
.contentspace{
width: 20%;
display:inline-block;
float: left;
margin: 0 1% 1% 0;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap{
position:relative;
top:460px;
width:100%;
z-index:501;
clear:both;
}
.foottxt{
width:100%;
height:26px;
text-align: center;
background:#333;
font-family: 'Roboto', sans-serif;
padding-top:15px;
font-size:0.5vw;
color:#FFFFFF;
font-weight:200;
}
答案 0 :(得分：1)
通常情况下，当我有一个我试图解开的CSS的复杂网站时，我尝试通过使用更简单的网站版本来降低复杂性。
在this JSFiddle中，我复制了你的contentwrap和footerwrap类，删除了一些不相关的细节（你必须向下滚动才能看到它们，因为它们上面设置了定位）。如您所见，由于position: relative和top属性，页脚与内容重叠。
在this JSFiddle中，页脚会随着内容的增长而向下移动（通过更改height属性来检查自己）。我删除了position: relative，top和z-index属性来执行此操作。
答案 1 :(得分：1)
除了使用position：absolute和position：relative之外，一些elemts有一个固定的高度，并且不能随内容增长而.textwrap需要一个clearfix。
@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
background:#171717;
margin:0;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
margin: 0 auto;
width:100%;
height:auto;
}
/*---------------------------- Header ----------------------------*/
.headerwrap{
position:relative;
background:#171717;
-moz-box-shadow: 0px 10px 20px 0px #333 ;
-webkit-box-shadow: 0px 10px 20px 0px #333 ;
box-shadow: 0px 10px 20px 0px #000;
z-index:200;
}
.header{
position:relative;
right:120px;
min-height:180px;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.logo{
position: absolute;
min-width:60px;
top:4%;
}
.logo img{
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
}
.social{
position: absolute;
width:100%;
min-width:20px;
top:15px;
right:1%;
z-index:500;
}
.social img{
float:right;
width:35px;
display: block;
padding:0 0 0px 15px;
}
img.move {
bottom:0px;
transition: transform 0.4s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move:hover {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.4, 1.4, 1.4);
}
/*---------------------------- Menu ----------------------------*/
.menu{
position:absolute;
width:100%;
top:200px;
z-index:401;
}
ul {
margin: 0 auto;
padding:0 0 5px 0;
list-style-type: none;
}
li{
display: inline;
list-style:none;
padding:1%;
transition: all 300ms;
}
li a{
color:#CCC;
transition:300ms;
}
li a:hover {
color:#900;
}
.menutxt{
text-align: center;
font-family: 'Raleway', sans-serif;
font-size:1.8vw;
font-weight:400;
z-index:300;
}
/*---------------------------- Image Fader ----------------------------*/
.fader {
width:100%;
z-index:1;
}
.fader img {
position:absolute;
width:100%;
height:500px;
max-height:1000px;
min-height:200px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@keyframes faderFadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
.fader img.top {
animation-name: faderFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;*/
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
/* position: relative */
margin-top:500px; /* margin-top instead of top */
width:100%;
z-index:500;
background:#171717;
/* height: 290px */
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
.textwrap{
position:relative;
width:100%;
/* top: 40px */
padding-top:40px; /* added */
}
/* clearfix */
.textwrap:after {
content: "";
display: table;
clear: both;
}
.content,
.divider,
.content2,
.contentspace {
text-align:center;
float: left;
}
.divider{
/* height: 200px */
width: 24%;
float: left;
/* display:inline-block; */
margin: 0 1% 1% 0;
}
.divider img{
display: block;
margin-left: auto;
margin-right: auto;
}
.content,
.content2 {
/* height:200px; */
width: 15%;
float: left;
margin: 0 1% 1% 0;
}
.contentspace{
width: 20%;
/* display:inline-block; */
margin: 0 1% 1% 0;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap{
position:relative;
/* top:460px; */
width:100%;
z-index:501;
clear:both;
}
.foottxt{
width:100%;
height:26px;
text-align: center;
background:#333;
font-family: 'Roboto', sans-serif;
padding:15px 0;
font-size:0.5em; /* typo vw */
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social">
<a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</div><!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div><!--close logo-->
</div><!--close header!-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">PORTFOLIO</a></li>
<li><a href="manga.html">CONTACT</a></li>
</ul>
</div><!--close menu!-->
</div><!--close headerwrap!-->
<!--===================================================Fader===================================================!-->
<div class="fadewrapper">
<div class="fader">
<img class="bottom" src="images/dsas.png"/>
<img class="top" src="images/dsa.png"/>
</div>
</div>
<!--===================================================Content===================================================!-->
<div class="contentwrap">
<div class="textwrap">
<div class="contentspace">
</div><!--close contentspace!-->
<div class="content">
<p>Specializations</p>
<p>With various skills in branding, multi-media
and advertising I am able to provide fresh and inspiring solutions
for the task given to me. Using various programs such as:</p>
</div><!--close content!-->
<div class="divider">
<img src="images/divide.png"/>
</div><!--close divider!-->
<div class="content2">
<p>Why me?</p>
<p>The work I create is reflecting something
fresh and exciting in order to meet the clients
needs. About pushing for new and innovative ideas
and pushing for an end result of brand and product growth</p>
</div><!--close content2!-->
<div class="contentspace">
</div><!--close contentspace!-->
</div><!--close textwrap!-->
</div><!--close contentwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div><!--close footerwrap!-->
</div><!--close wrapper!-->
</body>
</html>
答案 2 :(得分：0)
您不需要使用position: relative;和position: absolute;定位每个块。它打破了正常的内容流和内容的真实高度。
如果您将修复定位并获得包装的正常高度，则可以制作粘性页脚（如果它具有固定高度）。尽管内容高度很高，但这个页脚将位于页面的最底部。
有一个示例（from CSS Tricks），页面的页脚高度为142px。
* {
margin: 0;
}
html,
body {
height: 100%;
}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer,
.page-wrap:after {
height: 142px;
}
.site-footer {
background: orange;
}<div class="page-wrap">
Content!
</div>
<footer class="site-footer">
I'm the Sticky Footer.
</footer>