嘿，每个人都得到了这个 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 彼此低于另一个的概念。
提前致谢!
添加了一个 fiddle 来帮助可视化 http://jsfiddle.net/v5nenaej/
最佳答案
我还没有完全解决问题，但如果你看看我的更新 http://jsfiddle.net/v5nenaej/2/你可以看到我已经按照 GRC 的建议将包装器(CSS 第 23 行)设置为 display:block(考虑到表格会在没有内容的情况下自动折叠这一事实)。
您的第二个问题是将 .cbp-fbscroller(容器元素)和 .cbp-fbscroller section(子元素)设置为 height:100% (第 267 行)。
根据我对 CSS 和盒子模型的理解:
如果您要使用 CSS .cbp-fbscroller, .cbp-fbscroller section {height:300px;} 而不是 height:100%，那么您的父容器将是300 像素高。这会导致您的相邻 sibling (例如您遇到麻烦的 .footerwrap3 div)开始堆叠在 .cbp-fbscroller div 的底部。
.cbp-fbscroller div 中的所有子项都会变成溢出内容，在本例中显示为 block ，人为地扩展您的页面并重叠您的页脚。
为了让 .cbp-fbscroller 部分在内容流中显示为 block ，我将 .cbp-fbscroller 高度规则更改为 min -高度:100%。
从这里我认为您仍然有一些其他冲突的规则，这些规则可能归结为样式表中的所有定位或其他高度属性。那里的代码太多了，我现在无法整理，但是如果您进行了这些更改(我的 fiddle 中的第 267 行和第 24 行)，应该会让您更接近，并且您可以使用新的 fiddle 重新开始，只是尝试构建以大约 60% 的高度垂直堆叠的 block 。一旦你弄清楚了，你就可以添加你的其他 CSS 并找出是什么破坏了它。
关于html - 相互推送内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31440016/