Div背景颜色与div元素不在同一位置
我在每个网页的末尾都有一个页脚。在index.html中，页脚背景正确位于页脚元素/链接的后面。但是，在我的team.html中，背景色浮动在页面顶部，而div元素仍在底部。
如何使背景颜色移到底部？
这是页面顶部暗灰色矩形背景，在团队照片后面：
这是背景色应位于的部分，链接位于页面底部：
Here is the jsfiddle，以显示链接部分的背景如何不在团队页面的正确位置： Index.html：
<!DOCTYPE html>
<html>
<head>
<title>Snap</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header>
<nav>
<h1 class="page-title">
<a href="index.html">
<img src="leafsnap_logo.png" style="width:197px;height:71px;border:0;">
</a>
</h1>
<ul>
<li><a class="active" href="species.html">Species</a></li>
<li><a class="active" href="support.html">Support</a></li>
</ul>
</nav>
</header>
<section class="content-wrapper intro">
<div id="text" style="margin-top:11%;">
<a href="https://itunes.apple.com/us/app/leafsnap/id430649829?mt=8">
<img src="App Badge.png" width="185" height="62" style="margin-top:20%; float:left;"></img>
</a>
</div>
<div id="img-box">
<img src="Simulator Screen Shot - iPhone 8 Plus.png" height="472" width="234">
</div>
<div class="clearfix"></div>
</section>
<section class="content-wrapper about">
<div style="padding-top:4%; padding-bottom:4%">
</div>
</section>
<section class="content-wrapper how-to">
<div id="text">
</div>
<div id="img-box">
<img src="Simulator Screen Shot iPhone 6.png" width="251" height="610">
</div>
<div class="clearfix"></div>
</section>
<section class="content-wrapper results">
<div id="text" style="padding-bottom:10%;">
<br>
<div id="statistics">
<ul>
<li>250 <span style="color:#BEE872; font-size:30px;">Queo</span></li>
<li>130K <span style="color:#BEE872; font-size:30px;">Paratus</span></li>
<li>2M <span style="color:#BEE872; font-size:30px;">Ceritores</span></li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</section>
<section class="content-wrapper features">
<div style="background:#FFFFFF; width:100%; height:105px; text-align: center;" >
<h1 style="color:#000000; font-size:30px; padding-top:40px;">The <span style="color:#58A22F;">features</span></h1>
</div>
<div class="slideshow-container" style="display:inline-block;">
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)" style="margin-top:25%; float:left; margin-left:2%;"><img src="arrow.png" width="15px" height="24px" style="transform: rotate(180deg)"> </a>
<a class="next" onclick="plusSlides(1)" style="float: right; margin-top:25%; margin-right:2%;"><img src="arrow.png" width="15px" height="24px" border="0"> </a>
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<div id ="img-box">
<img src="slideshow Screen 1.png" width="212" height = "430">
</div>
<div class="caption">A complete library of northeast tree species amassed by the Smithsonian Institution</div>
<div class="clearfix"></div>
</div>
<div class="mySlides">
<div id="img-box">
<img src="slideshow Screen 2.png" width="212px" height = "430px">
</div>
<div class="caption">Matching games for learning the flowers, fruit, seeds and bark of 220 tree species</div>
<div class="clearfix"></div>
</div>
<div class="mySlides">
<div id="img-box">
<img src="slideshow Screen 3.png" width="212px" height = "430px">
</div>
<div class="caption">Visual recognition software originally developed by Columbia University Engineers as a high tech aid for scientists to discover new species in unknown habitats. </div>
<div class="clearfix"></div>
</div>
</div>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<div id="icon">
<img class = "slide-icon" src="leaves-green.png" width="60px" height="60px">
<img class = "slide-icon" src="brain-green.png" width="60px" height="60px">
<img class = "slide-icon" src="camera-green.png" width="60px" height="60px">
</div>
<div class="clearfix"></div>
<br>
</section>
<section class="content-wrapper logos">
<div id="logo">
<img class = "slide-icon" src="NMNH.png" width="261px" height="42px">
<img class = "slide-icon" src="FuFoundation.png" width="341px" height="42px">
<img class = "slide-icon" src="UMaryland.png" width="213px" height="42px" style="padding-bottom:3px;">
</div>
</section>
<section class="content-wrapper links">
<div style="width:100px; padding-top:20px; margin:auto; display:flex;">
<img src="github icon.png" width="34px" height="34px" style="padding-right:10px;"></img>
<img src="twitter icon.png" width="34px" height="34px"></img>
</div>
<ul class="list-horizontal">
<li>Contact</li>
<li><a href="otherPrac.html">Team</a></li>
<li><a href="press/press.html">Press</a></li>
<li><a href="dataset/dataset.html">Dataset</a></li>
</ul>
</section>
</body>
</html>
team.html：
<!DOCTYPE html>
<html>
<head>
<title>Snap</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="team.css">
<link rel="stylesheet" type="text/css" href="../main.css">
</head>
<body>
<nav>
<h1 class="page-title">
<a href="index.html">
<img src="leafsnap_logo.png" style="width:197px;height:71px;border:0;">
</a>
</h1>
<ul>
<li><a class="active" href="../species.html">Species</a></li>
<li><a class="active" href="../support.html">Support</a></li>
</ul>
</nav>
<section class="content-wrapper history">
<div class="title">
<h2>About Us</h2>
</div>
<input id="ch" type="checkbox">
<div class="headline">
<p>Columbia University, the University of Maryland, and the Smithsonian Institution are working on visual recognition software to help identify species from photographs.</p>
</div>
<div class="text">
</div>
<label for="ch"></label>
</input>
</section>
<section class="content-wrapper team">
</section>
<section class="content-wrapper links">
<div style="width:100px; padding-top:20px; margin:auto; display:flex;">
<img src="github icon.png" width="34px" height="34px" style="padding-right:10px;"></img>
<img src="twitter icon.png" width="34px" height="34px"></img>
</div>
<ul class="list-horizontal">
<li>Contact</li>
<li><a href="otherPrac.html">Team</a></li>
<li><a href="press/press.html">Press</a></li>
<li><a href="dataset/dataset.html">Dataset</a></li>
</ul>
</section>
</body>
</html>
main.css：
* { margin: 0; padding: 0; }
a{
color: #000000;
}
body {
height: 100%;
margin: 0;
width: 100%;
font-family: "Avenir Next";
font-size:18px;
text-align: justify;
text-justify: auto;
}
header{
position:relative;
background-color:white;
}
/*Navigation Bar*/
nav{
position:relative;
display: inline-block;
width:100%;
height:80px;
z-index:1;
background-color:white;
}
nav ul {
float: right;
margin-right:5%;
position:relative;
top:30px;
}
nav li{
margin: 0;
padding: 0 30px;
display: inline;
font-weight: 550;
font-size: 18px;
color: #000000;
}
nav li a{
text-decoration:none;
}
.page-title{
float:left;
margin-left:5%;
width:197px;
height:70px;
}
section.intro{
width:100%;
color:#FFFFFF;
background: linear-gradient(#BEE872,#429321);
background-repeat: no-repeat;
background-attachment: fixed;
}
.clearfix{
clear:both
}
section.intro #text{
width:40%;
float:left;
margin-left:5%;
}
section #text{
width:40%;
float:left;
margin-left:5%;
}
section.intro #img-box{
margin-right:5%;
padding-bottom:4%;
}
section #img-box{
width:40%;
float:right;
margin-top:5%;
margin-right:10%;
}
section img{
float:right;
}
section h1{
font-weight:550;
font-size:36px;
line-height:125%;
}
section h3{
font-weight:425;
}
section.intro h3{
font-size:18px;
width:363px;
}
section.about{
height:100%;
background: #F5F8F4;
}
section.about h1{
width: 50%;
margin-left: auto;
margin-right: auto;
}
section.about p{
width: 50%;
margin-left: auto;
margin-right: auto;
}
section.how-to{
background: linear-gradient(#BBDDFF, #85B8FF);
background-repeat:no-repeat;
background-attachment: fixed;
color:#FFFFFF;
}
section.how-to h3{
font-size:28px;
width:370px;
padding-top:5%;
padding-bottom:3%;
}
section.how-to #text{
padding-top:5%;
}
section.results{
padding-top:7%;
background-color:#F6F7F5;
}
section.results #text{
float:none;
margin:0px auto;
width:743px;
}
section.features{
background: linear-gradient(#BEE872,#429321);
background-repeat:no-repeat;
background-attachment: fixed;
color:#FFFFFF;
font-size:22px;
font-weight:425;
}
#statistics ul {
position:relative;
height:218px;
list-style: none;
margin:0px auto;
}
#statistics li{
font-weight: 550;
font-size: 80px;
width: 200px;
color: #BBDDFF;
float:left;
text-align:center;
padding-right:5%;
}
.slideshow-container{
width:100%;
display:block;
}
.caption{
font-size:22px;
color: #FFFFFF;
width: 287px;
float: left;
font-weight:500;
margin-top:20%;
margin-left: 10%;
position:absolute;
text-align:left;
}
#icon{
padding-top:50px;
display: flex;
justify-content: space-between;
width:90%;
margin-left: 5%;
}
#logo{
display:block;
padding-top:50px;
padding-bottom:50px;
display: flex;
justify-content: space-between;
width:90%;
margin-left: 5%;
}
section.links{
background-color:#EEEEEE;
height:150px;
text-align:center;
}
section.links img{
margin:auto;
}
.list-horizontal{
padding-top:30px;
width:50%;
margin: 0 auto;
font-size:20px;
font-weight:450;
text-align:center;
white-space:nowrap
}
.list-horizontal li {
display:inline-block;
padding-right:24px;
color:#4A4A4A;
}
.list-horizontal li a{
color:#4A4A4A;
text-decoration: none
}
.list-horizontal li:before {
content: '\00a0\2022\00a0\00a0';
color:#4A4A4A;
padding-right:24px;
font-size:16px;
}
.list-horizontal li:first-child:before {
content: '';
}
@font-face{
font-family: Avenir Next;
src: url('avenir-next-regular.ttf'),
}
#home{
margin:auto;
width:85%;
text-indent:50px;
column-count:2;
column-gap:30px;
}
team.css：
section.intro{
width:100%;
color:#FFFFFF;
background: linear-gradient(#BEE872,#429321);
background-repeat: no-repeat;
background-attachment: fixed;
}
.clearfix{
clear:both
}
section.intro #text{
width:40%;
float:left;
margin-left:5%;
}
section #text{
width:40%;
float:left;
margin-left:5%;
}
section.intro #img-box{
margin-right:5%;
padding-bottom:4%;
}
section #img-box{
width:40%;
float:right;
margin-top:5%;
margin-right:10%;
}
section img{
float:right;
}
section h1{
font-weight:550;
font-size:36px;
line-height:125%;
}
section h3{
font-weight:425;
}
section.intro h3{
font-size:18px;
width:363px;
}
section.about{
height:100%;
background: #F5F8F4;
}
section.about h1{
width: 50%;
margin-left: auto;
margin-right: auto;
}
section.about p{
width: 50%;
margin-left: auto;
margin-right: auto;
}
section.how-to{
background: linear-gradient(#BBDDFF, #85B8FF);
background-repeat:no-repeat;
background-attachment: fixed;
color:#FFFFFF;
}
section.how-to h3{
font-size:28px;
width:370px;
padding-top:5%;
padding-bottom:3%;
}
section.how-to #text{
padding-top:5%;
}
section.results{
padding-top:7%;
background-color:#F6F7F5;
}
section.results #text{
float:none;
margin:0px auto;
width:743px;
}
section.features{
background: linear-gradient(#BEE872,#429321);
background-repeat:no-repeat;
background-attachment: fixed;
color:#FFFFFF;
font-size:22px;
font-weight:425;
}
#statistics ul {
position:relative;
height:218px;
list-style: none;
margin:0px auto;
}
#statistics li{
font-weight: 550;
font-size: 80px;
width: 200px;
color: #BBDDFF;
float:left;
text-align:center;
padding-right:5%;
}
.slideshow-container{
width:100%;
display:block;
}
.caption{
font-size:22px;
color: #FFFFFF;
width: 287px;
float: left;
font-weight:500;
margin-top:20%;
margin-left: 10%;
position:absolute;
text-align:left;
}
#icon{
padding-top:50px;
display: flex;
justify-content: space-between;
width:90%;
margin-left: 5%;
}
#logo{
display:block;
padding-top:50px;
padding-bottom:50px;
display: flex;
justify-content: space-between;
width:90%;
margin-left: 5%;
}
section.links{
background-color:#EEEEEE;
height:150px;
text-align:center;
}
section.links img{
margin:auto;
}
.list-horizontal{
padding-top:30px;
width:50%;
margin: 0 auto;
font-size:20px;
font-weight:450;
text-align:center;
white-space:nowrap
}
.list-horizontal li {
display:inline-block;
padding-right:24px;
color:#4A4A4A;
}
.list-horizontal li a{
color:#4A4A4A;
text-decoration: none
}
.list-horizontal li:before {
content: '\00a0\2022\00a0\00a0';
color:#4A4A4A;
padding-right:24px;
font-size:16px;
}
.list-horizontal li:first-child:before {
content: '';
}
@font-face{
font-family: Avenir Next;
src: url('avenir-next-regular.ttf'),
}
#home{
margin:auto;
width:85%;
text-indent:50px;
column-count:2;
column-gap:30px;
}
section.history{
background-repeat: no-repeat;
background-attachment: fixed;
margin:auto;
color: #232323;
display:inline-block;
text-align:center;
width:100%;
background:#FBFBFB;
}
section.history h2{
margin-top: 10px;
margin-bottom: 10px;
font-weight:600;
}
.headline {
display:inline-block;
width: 60%;
margin-bottom:10px;
font-style:normal;
line-height: normal;
font: helvetica neue;
}
.text {
height: 0px;
width:80%;
overflow: hidden;
margin:auto;
margin-bottom:20px;
display:block;
text-align:justify;
column-count:2;
column-gap:5%;
}
.text a{
color:#000;
}
.container {
position: relative;
}
label {
font-weight:550;
}
input {
display: none;
}
label {
font-weight:550;
display:block;
}
input {
display: none;
}
label:after {
content: "Show More";
}
.text{
margin-top: 10px;
text-indent:40px;
}
input:checked + label:after {
content: "Show Less";
}
input:checked ~ div {
height: 100%;
}
.team-listing {
position: relative;
margin-top: 40px;
margin-right: auto;
margin-left: auto;
}
.team-listing ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-direction: row;
flex-flow: row wrap;
flex-shrink: 1;
flex-grow: 1;
float: left;
min-width: 0;
max-width: 100%;
position: relative;
}
.team-listing li {
display: inline-block;
vertical-align:top;
overflow: hidden;
float: left;
height: 340px;
list-style-position: inside;
margin: 1px 1px 1px 1px;
background-color: #fff;
}
a {
display: inline-block;
}
article {
position: relative;
width: 300px;
height: 340px;
overflow: hidden;
}
article:hover {
background-color: #000;
}
.portrait {
position: relative;
width: 300px;
height: 340px;
overflow: hidden;
}
.portrait image {
clip-path: url(#circle);
}
a:hover .portrait image {
clip-path: none;
}
a:hover article:after {
position: absolute;
display: block;
}
.ring {
fill: none;
stroke: white;
stroke-width: 1;
opacity: 0;
transform-origin: 50% 50%;
transform: scale(1.8);
transition: transform .3s ease, opacity .4s ease;
}
a:hover .ring {
opacity: 1;
transform: scale(1);
}
a:hover .bio {
color: #FFF;
background-color: #000000;
width: 100%;
padding-top: 0;
}
.bio {
position: absolute;
bottom: 0;
padding: 1rem 1rem;
color: #000;
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？