I having problems with my positioning of my footer. My footer is placing on the navigation bar at the top of the page. Instead the footer should be allocated right at the bottom of the webpage. The changes i attepted is removing the position property not to be absolute and trying to place the footer out of the body tag but have not been successful.
Where am I go going wrong with this ?
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
body {
/* font: 15px/1.5 Arial, Helvetica, sans-serif; */
font-family: 'Open Sans', sans-serif;
padding:0;
margin-left: 0px;
margin-right: 0px;
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
background: linear-gradient(90deg, #D3D3D3 0%, rgb(255,255,255) 10%, rgb(255,255,255) 90%, #D3D3D3 100%);
}
.CLASSNAME {
position:relative
}
* {
}
/*Global*/
.container{
width:1400px;
margin:auto;
overflow:hidden;
}
a{
text-decoration: none;
}
/*Font*/
@font-face {
font-family: theboldfont;
src: url(font/theboldfont.ttf)
}
ul {
position: absolute;
top: 0px;
right: 16px;
}
/*Header*/
header{
background: #19252A;
color: #ffffff;
padding-top: 5px;
min-height: 70px;
}
header a{
color: #ffffff;
text-align: center;
text-decoration:none;
text-transform: uppercase;
font-size:11px;
font-weight: bold;
padding: 0px;
}
header li{
/*float:left;*/
display:inline;
padding: 0 5px 0 5px;
}
.logo{
padding-left: 75px;
padding-bottom: 1px;
padding-top: 2px;
}
nav{
width: 100%;
display: inline-block;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight, header .current a{
color:#e8491d;
font-weight:bold;
}
header a:hover{
color:#cccccc;
font-weight:bold;
}
/*Learn more section*/
.learn-more{
background: #fff;
height: 100%;
width: 100%;
top: 20px;
}
.learn-more-message{
border-bottom: 30px;
padding-bottom: 0px;
}
.learn-more-message p {
text-align: center;
font-weight: bold;
padding: 30px 125px 20px 125px;
border-bottom: 0px;
border-top: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.learn {
display: inline-block;
width: 175px;
margin: 5px; /* space between buttons */
background: deeppink; /* background color */
color: white; /* text color */
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
border-radius: 50px; /* rounded corners */
padding: 0px; /* space around text */
padding-bottom: 10px;
padding-top: 10px;
border: 0px;
font-family: theboldfont;
}
.join{
display: inline-block;
width: 175px;
margin: 5px; /* space between buttons */
background: deeppink; /* background color */
color: white; /* text color */
font-size: 1.1em;
font-weight: bold;
text-decoration: none;
border-radius: 50px; /* rounded corners */
padding: 0px; /* space around text */
padding-bottom: 10px;
padding-top: 10px;
border: 0px;
font-family: theboldfont;
}
div .grid-item1{
width: 150px;
}
div .grid-container1{
justify-content: center;
align-items: center;
text-align: center;
}
/*Find Us Map*/
.find-us-map {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: 100%;
}
.find-us, .map, .artcle {
flex-basis: 100%;
margin-bottom: 0px;
}
@media screen and (min-width: 800px) {
.find-us {
flex: 3;
background-color: #fff;
}
.img {
height: 250px;
}
.map {
flex: 5;
}
.article {
flex: 6;
}
.article img{
background-repeat: no-repeat;
width: 100%;
height: 250px;
}
.map img{
background-repeat: no-repeat;
width: 100%;
height: 250px;
}
/*Picture/Message Box*/
.pm-box {
display: flex;
height: 150px;
border-bottom: 15px solid #fff;
}
.picture {
flex: 2;
background: #19252A;
}
.message {
flex: 8;
background: #19252A;
padding-right: 70px;
margin: none;
padding-top: 25px;
}
.message p {
font-family: 'Roboto', sans-serif;
}
.circle {
width: 100px;
height: 100px;
border-radius:80px;
background: white;
margin: 0;
position:relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 5px solid black;
}
/*Footer*/
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 15px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 20px;
}
footer {
background: #19252A;
position:fixed;
bottom:0;
width:100%;
height:100px;
}
.footer-container{
width:1000px;
margin:0;
overflow:hidden;
}
.footer-container p{
position: absolute;
top: 35px;
float: left;
color: #fff;
font-size: 10px;
}
.footer-container{
height:100px;
margin-left: 10px;
}
.footer-container ul{
display: flex;
float: right;
}
.footer-container ul li{
list-style: none;
}
.footer-container ul li a {
width: 60px;
height: 60px;
background: #fff;
text-align: centre;
line-height: 60px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
.footer-container ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
.footer-container ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
.footer-container ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
.footer-container ul li a:hover:before {
top: 0;
}
.footer-container ul li:nth-child(1) a:before{
background: #3b5999;
}
.footer-container ul li:nth-child(2) a:before{
background: #55acee;
}
.footer-container ul li:nth-child(3) a:before{
background: #cd201f;
}
.footer-container ul li:nth-child(4) a:before{
background: #e4405f;
}
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" conftent="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Nature Tours | Home</title>
<!--Ion Icons-->
<link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aldrich&display=swap" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!--Our own stylesheet-->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script type="text/javascript" src="scripts.js"></script>
<header>
<div class="container">
<div class="CLASSNAME">
<div>
<a href="index.html">
<img class="logo" src="img/stars-logo.png" alt="" />
</a>
<nav>
<ul>
<li><a href="">About Us</a></li>
<li><a href="workshops.html">Workshops</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="learn-more-message">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
</p>
<div class="grid-container1">
<a class="learn"
title="Relevant Title"
href="#">Learn More</a>
<a class="join"
title="Relevant Title"
href="join-our-school.html">Join Our School</a>
</div>
</div>
</div>
<!-- <section class="Learn-more-buttons">
</section> -->
<div class="container">
<div class="pm-box">
<div class="picture">
<div class="circle">
</div>
</div>
<div class="message">
<p style="color: #ffffff">
"Sed tristique augue tellus. Vestibulum sagittis vestibulum nibh, at rutrum nisi faucibus eu. Mauris eget nisl eleifend, dignissim ante vel, convallis eros. Phasellus urna eros, facilisis et faucibus sit amet, bibendum quis diam. Curabitur ornare ultricies pulvinar."<br />
<br />
-Napet, COMOGET Seque.
</p>
</div>
</div>
</div>
<div class="container">
<div class="footer-container">
<p>
######################################
</p>
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<script>type = "text/javascript" src="scripts.js</script>
</body>
</html>
最佳答案
将页脚更改为使用相对 位置而不是绝对
ul {
position: relative;
top: 0px;
right: 16px;
}
关于html - 为什么我的页脚在我的导航栏上而不是在底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59166565/