嘿，每个人都得到了这个div，我希望将其推送到其他内容之下并留在那里。只是似乎不想移动。基本上需要将.footerwrap3推到我所有内容的底部。
<!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" />
<link href="css/portfolio_style.css" rel="stylesheet" type="text/css" />
<script src="js/modernizr.custom.js"></script>
</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="portfolio.html">PORTFOLIO</a>
</li>
<li><a href="contact.html">CONTACT</a>
</li>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="main">
<div id="cbp-fbscroller" class="cbp-fbscroller">
<nav>
<a href="#fbsection1" class="cbp-fbcurrent">Section 1</a>
<a href="#fbsection2">Section 2</a>
<a href="#fbsection3">Section 3</a>
<a href="#fbsection4">Section 4</a>
<a href="#fbsection5">Section 5</a>
</nav>
<section id="fbsection1"></section>
<section id="fbsection2"></section>
<section id="fbsection3"></section>
<section id="fbsection4"></section>
<section id="fbsection5"></section>
</div>
</div>
<!--===================================================Footer===================================================!-->
<div class="footerwrap3">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- jquery.easing by http://gsgd.co.uk/ : http://gsgd.co.uk/sandbox/jquery/easing/ -->
<script src="js/jquery.easing.min.js"></script>
<!-- waypoints jQuery plugin by http://imakewebthings.com/ : http://imakewebthings.com/jquery-waypoints/ -->
<script src="js/waypoints.min.js"></script>
<!-- jquery-smartresize by @louis_remi : https://github.com/louisremi/jquery-smartresize -->
<script src="js/jquery.debouncedresize.js"></script>
<script src="js/cbpFixedScrollLayout.min.js"></script>
<script>
$(function() {
cbpFixedScrollLayout.init();
});
</script>
</body>
</html>
默认样式CSS：
@charset "utf-8";
/*---------------------------- Body and Default ----------------------------*/
body {
margin:0 auto;
background:#171717;
font-family: 'Roboto', sans-serif;
color:#CCC;
}
html, body {
height: 100%;
}
a{
color:#000;
transition:300ms;
}
a:hover {
color:#000;
}
a:link {
text-decoration: none;
}
/*---------------------------- Main Wrapper ----------------------------*/
.wrapper{
display: table;
width: 100%;
height: 100%;
}
/*---------------------------- Header ----------------------------*/
.header{
position:relative;
min-height:180px;
padding-right:225px;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-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;
}
.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;
}
/*---------------------------- Footer Text ----------------------------*/
.foottxt{
width:100%;
text-align: center;
background:#070707;
font-family: 'Roboto', sans-serif;
padding:15px 0;
font-size:0.7em;
color:#FFFFFF;
font-weight:200;
margin: 0;
box-sizing: border-box;
}
/*---------------------------- -------------------------------------------------------- FADERS ---------------------------- ----------------------------*/
/*---------------------------- Logo Fader ----------------------------*/
.logofade{
animation: logofadein 3s;
-moz-animation: logofadein 3s; /* Firefox */
-webkit-animation: logofadein 3s; /* Safari and Chrome */
-o-animation: logofadein 3s; /* Opera */
}
}
@keyframes logofadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes logofadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes logofadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes logofadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- menu Fader ----------------------------*/
.menufade{
opacity:0;
animation: menufadein forwards 3s 1s;;
-moz-animation: menufadein forwards 3s 1s; /* Firefox */
-webkit-animation: menufadein forwards 3s 1s; /* Safari and Chrome */
-o-animation: menufadein forwards 3s 1s; /* Opera */
}
}
@keyframes menufadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes menufadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes menufadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes menufadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
/*---------------------------- social Fader ----------------------------*/
.socialfade{
opacity:0;
animation: socialfadein forwards 3s 0.5s;;
-moz-animation: socialfadein forwards 3s 0.5s; /* Firefox */
-webkit-animation: socialfadein forwards 3s 0.5s; /* Safari and Chrome */
-o-animation: socialfadein forwards 3s 0.5s; /* Opera */
}
}
@keyframes socialfadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes socialfadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes socialfadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes socialfadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
页面样式CSS：
/*---------------------------- Content ----------------------------*/
.main{
position:relative;
display:block;
height:100%;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap3{
position:relative;
bottom:0px;
width:100%;
z-index:10000;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Faders ----------------------------*/
/* Set all parents to full height */
.container,
.cbp-fbscroller,
.cbp-fbscroller section {
height: 100%;
}
/* The nav is fixed on the right side and we center it by translating it 50%
(we don't know it's height so we can't use the negative margin trick) */
.cbp-fbscroller > nav {
position: fixed;
z-index: 9999;
right: 100px;
top: 50%;
width: 26px;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.cbp-fbscroller > nav a {
display: block;
z-index: 9999;
color: transparent;
width: 26px;
height: 26px;
outline: none;
margin: 25px 0;
border-radius: 50%;
border: 4px solid #fff;
}
.no-touch .cbp-fbscroller > nav a:hover {
background: rgba(255,255,255,0.6);
}
.cbp-fbscroller > nav a.cbp-fbcurrent {
background: #fff;
}
/* background-attachment does the trick */
.cbp-fbscroller section {
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}
.no-touch .cbp-fbscroller section {
background-attachment: fixed;
}
#fbsection1 {
background-image:url(../images/151368.jpg);
}
#fbsection2 {
background-image:url(../images/dsas.png);
}
#fbsection3 {
background-image:url(../images/151368.jpg);
}
#fbsection4 {
background-image:url(../images/dsas.png);
}
#fbsection5 {
background-image:url(../images/151368.jpg);
}
在定位和身高等方面真正努力获得让div在彼此之下的概念。
提前致谢！
添加了一个帮助可视化http://jsfiddle.net/v5nenaej/
的小提琴答案 0 :(得分：2)
我还没有完全解决问题，但如果你查看我的更新http://jsfiddle.net/v5nenaej/2/，你可以看到我已经将包装器（CSS第23行）设置为display:block，正如GRC建议的那样（至考虑到表格会在没有内容的情况下自动崩溃这一事实。
您的第二个问题是将.cbp-fbscroller（容器元素）和.cbp-fbscroller section（子项）设置为height:100%（第267行）。
从我对CSS和盒子模型的理解：
如果您使用CSS .cbp-fbscroller, .cbp-fbscroller section {height:300px;}而不是height:100%，那么您的父容器将高达300像素。这会导致您的相邻兄弟姐妹（例如您遇到问题的.footerwrap3 div）开始堆叠在.cbp-fbscroller div的底部。
然后，.cbp-fbscroller div中的所有子项都会成为溢出内容，在这种情况下，这些内容会显示为人工扩展页面并重叠页脚的块。
要让.cbp-fbscroller section在内容流中显示为块，我将.cbp-fbscroller身高规则更改为min-height:100%。
从这里开始，我认为你还有一些其他相互冲突的规则可能归结为样式表中的所有定位或其他高度属性。现在有一些代码供我使用，但是如果你做出那些改变（我的小提琴中的第267行和第24行），这会让你更接近，你可以从一个新的小提琴开始新的尝试构建垂直堆叠在60％高度的块。一旦你明白了，你就可以重新添加你的其他CSS并弄清楚是什么打破了它。
答案 1 :(得分：1)
你的.cbp-fbscroller div非常高，并且使你的文档比其他文件高得多。如果我删除了该div，则.footerwrap3 div会在所有其他内容下正确显示。
看起来.cbp-fbscroller导航用于分页多页内容，但由于您的网站布局还没有多页内容，因此它使您的文档比页面的其他部分更高。一旦你添加更多内容，它应该正确地下推你的.footerwrap3 div。
答案 2 :(得分：0)
您只需要更改
.footerwrap3{
position:relative;
}
到
position:fixed;