如何在绝对定位的图像上添加粘性页脚

时间：2017-10-18 07:30:36

标签： html css css-position footer sticky-footer

如何在页面底部添加粘性页脚，而不是修复。我最后错误地将页脚添加到我的网站。页脚将位于绝对定位图像的顶部。我尝试使用绝对位置，最小高度解决方案，但它没有工作。页脚不在整个页面的底部（它将位于初始起始位置页面的底部）。这是HTML代码和CSS代码。我不确定问题/冲突在哪里，我尝试扫描并查看代码但看不到它。 HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
          <title> Home </title>       
        <meta name="description" content="A music review website">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body class="homepage">
        <header>
            <a href="index.php"> 
                <img class="banner" 
                src="Pictures/second_banner_image_blue.jpg">
            </a>
        </header> 
        <nav> 
            <a class="homelink" id="activehome" href="index.php">Home</a>
            <a class="reviewasonglink" href="Review_a_song.php">Review a 
            song</a>
            <a class="reviewslink" href="Sort_by_rating.php">Reviews</a>
            <a class="faqlink" href="faq.php">FAQ</a>
            <a class="contactlink" href="contactpage.php">Contact us</a>
            <form method="get" action="search.php">
                <input type="text" name="q" class="searchbox"  
                placeholder="Search for a song, album or artist here...">
                <input type="image" name="Search" 
                src="Pictures/magnifyingglass.png" class="searchbutton">
            </form>
        </nav>
        <a href="Review_a_song.php"><img class="homepic1" 
        src="Pictures/concert_edit.jpg"></a>
        <a href="Review_a_song.php"><p class="hometitle1">Review your 
        favourite music</p></a>
        <a href="sort_by_rating.php"><img class="homepic2" 
        src="Pictures/songreviews_edit.jpg"></a>
        <a href="sort_by_rating.php"><p class="hometitle2">Read 
        comprehensive reviews</p></a>
        <a href="faq.php"><img class="homepic3" 
        src="Pictures/questions_edit.jpg"></a>
        <a href="faq.php"><p class="hometitle3">Questions?</p></a>
        <footer>
            <p>Copyright</p>
        </footer>
    </body>
</html>

CSS：

@font-face {
    font-family: opensans; src: url('fonts/OpenSans.tff');
    font-family: roboto; src: url('fonts/Roboto.tff');
    font-family: robotobold; src: url('fonts/RobotoBold.tff');
    font-family: headings; src: url('fonts/adamcg.otf');
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin:0px;
    padding: 0px;
    height: 100%;
    overflow-x: hidden;
    background-attachment: fixed;
}

.homepage {
    background-attachment: scroll;
}

.homepic1 {
    height: 100%;
    width: 100%;
    position: absolute;
    cursor: pointer;
}

.homepic2 {
    height: 80%;
    width: 100%;
    position: absolute;
    cursor: pointer;
    transform: translateY(500px);
}

.homepic3 {
    height: 100%;
    width: 100%;
    position: absolute;
    cursor: pointer;
    transform: translateY(972px);
}

header {
    height: 86px;
}

a {
    text-decoration-line: none;
}

.background {
    display: block;
    height: 100%;
}

a:visited {
    color: currentColor;
}

h1 {
    margin-left: 53px;
    margin-top: 80px;
    color: white;
    font-family: opensans, sans-serif;
}

h2 {
    margin-left: 46px;
    text-decoration-line: underline;
    color: white;
    position: absolute;
    transform: translateY(428px);
    font-family: opensans, sans-serif;
}

h4 {
    font-size: 30px;
    font-family: opensans, sans-serif;
}

.review_content{
    margin-left: 53px;
    transform: translateY(50px);
    color: white;
    font-family: opensans, sans-serif;
}

nav {
    width: 100%;
    height: 40px;
    background-color:white;
    border: 0.5px solid black;
    z-index: 1;
    position: fixed;
}

nav a{
    width:11.4%;
    float: left;
    text-align: center;
    height: 30px;
    padding-top: 10px;
    color: black;
}

.homelink {
    margin-left: 0px;
}

.hometitle1 {
    color: black;
    margin-top: 90px;
    font-size: 65px;
    position: absolute;
    font-family: headings, sans-serif;
    margin-left: 200px;
    font-weight: 600;
    text-shadow: 2px 2px 6px #565656;
    cursor: pointer;
}

.hometitle2 {
    color: black;
    margin-top: 0px;
    font-size: 65px;
    position: absolute;
    font-family: headings, sans-serif;
    color: #16308d;
    margin-left: 190px;
    font-weight: 600;
    text-shadow: 3px 3px 6px #0f2163;
    transform: translateY(600px);
    cursor: pointer;
}

.hometitle3 {
    color: black;
    margin-top: 0px;
    font-size: 65px;
    position: absolute;
    font-family: headings, sans-serif;
    color: #510000;
    margin-left: 440px;
    font-weight: 600;
    text-shadow: 2px 2px 6px #450000;
    transform: translateY(1070px);
    cursor: pointer;
}

.reviewasonglink, .reviewslink, .contactlink, .faqlink, .homelink {
    transition: 0.4s;
    font-size: 16px;
    text-decoration: none;
    font-family: opensans, sans-serif;
}

.reviewasonglink:hover, .reviewslink:hover, .contactlink:hover, 
.faqlink:hover, .homelink:hover {
    background-color: #404040;
    color:#e6e6e6;
}

#activesortbyrating, #activereviewasong, #activecontact, #activefaq, 
#activehome {
    background-color: #5e5e5e;
    color:#e6e6e6;
}

#activesortbyrating:hover, #activereviewasong:hover, #activecontact:hover, 
#activefaq:hover, #activehome:hover {
    background-color: #404040;
    color:#e6e6e6;
}

.banner {
    z-index: 1;
    position: fixed;
}

.searchbox {
    float: right;
    width: 230px;
    margin-right: 80px;
    padding: 5px;
    height: 29px;
}

input::placeholder {
    color: black;
    font-size: 12.8px;
    font-family: opensans, sans-serif;
}

input[name="q"] {
    font-family: opensans, sans-serif;
    border: none;
    padding-bottom: 0px;
    border-bottom: 0.8px solid black;
}

textarea:focus, input:focus{
    outline: none;
}

.formentries {
    margin-top: 80px;
    margin-left: 53px;
    color: white;
    font-family: opensans, sans-serif;
}

.warning {
    font-weight: bold;
}

.formentry {
    font-size: 20px;
    font-weight: bold;
    font-family: opensans, sans-serif;
}

.searchbutton {
    float: right;
    width: 35px;
    height: 35px;
    transform: translateX(273px);
    font-family: opensans, sans-serif;
}

input[type="radio"] {
    position: absolute;
    font-family: opensans, sans-serif;
}

textarea {
    border: 1px solid black;
    border-radius: 5px;
    background-color: lightgray;
    font-family: opensans, sans-serif;
}

select {
    background-color: lightgray;
}

.formbox {
    font-size: 20px;
    font-family: opensans, sans-serif;
    border: 1px solid black;
    background-color: lightgray;
    border-radius: 5px;
    font-family: opensans, sans-serif;
}

.contactform {
    padding-left: 53px;
    margin-top: 25px;
    font-size: 19px;
    font-weight: 600;
    color: white;
    font-family: opensans, sans-serif;
}

.contactinfo {
    padding-left: 53px;
    margin-top: 70px;
    color: white;
    font-family: roboto, sans-serif;
}

.contactentry {
    font-size: 18px;
    font-family: opensans, sans-serif;
    border: 1px solid black;
    background-color: lightgray;
    border-radius: 5px;
    font-family: opensans, sans-serif;
}

.contactmessage {
    font-size:15px;
    font-family: opensans, sans-serif;
}

.searchtitle, .searchartist, .searchalbum {
    color: white;
    transform: translateX(53px);
    font-family: opensans, sans-serif;
}

.searchtitle {
    font-weight: bolder;
    font-size: 18px;
    text-decoration-line: none;
    padding-top: 20px;
}

.FAQ {
    margin-left: 53px;
    margin-top: 80px;
    margin-right: 30px;
    color: white;
    font-family: opensans, sans-serif;
}

.genreoptions {
    max-width: 960px;
    margin-left: 45px;
    margin-top: 70px;
    position: absolute;
    border-spacing: 1;
}

.ratingoptions {
    max-width: 960px;
    transform: translateX(45px);
    margin-top: 277px;
    position: absolute;
    border-spacing: 1;
}

.reviews th {
    font-weight: 400;
    background: #024457;
    color:white;
}

.reviews {
    max-width: 960px;
    margin-left: 44px;
    margin-top: 520px;
    position: absolute;
    margin-bottom: 10px;
}

.genreoptions thead th {
  font-weight: 400;
  background: #8a97a0;
  color: #FFF;
}

.ratingoptions thead th {
  font-weight: 400;
  background: #8a97a0;
  color: #FFF;
}

.ratingoptions tr {
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

.genreoptions tr {
  background: #f4f7f8;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

.reviews tr {
  background:white;
  border-bottom: 1px solid #FFF;
  margin-bottom: 5px;
}

.ratingoptions tr:nth-child(even) {
    background: #e8eeef;
}

.genreoptions tr:nth-child(even) {
    background: #e8eeef;
}

.reviews tr:nth-child(even) {
    background:#e0ebfc;
}

th, td, tr {
    padding: 8px;
    font-weight: 300;
    font-family: opensans, sans-serif;
}

.circle {
    width: 17px;
    height: 17px;
    float: right;
    padding-left: 25px;
}

input[type=radio]{
  visibility: hidden;
  position: absolute;
}

label > input + img{ 
  cursor:pointer;
  filter: brightness(0%);
  transition: all 0.5s ease;
}

label > input:checked + img {
    filter: brightness(100%);
}

label {
    cursor: pointer;
    display: block;
    font-family: opensans, sans-serif;
}

.genreoptions, .ratingoptions td {
    width: 33%;
}

.reviews tbody tr:hover td {
    background-color:#d4d5d6;
}

.genreoptions tbody td:hover {
    background-color: lightgray;
}

.ratingoptions tbody td:hover {
    background-color: lightgray;
}

.reviews th, td {
    cursor: pointer;
    text-align: left;
}

.sortinfo {
    position: absolute;
    color: white;
    transform: translate(45px, 468px);
    font-family: opensans, sans-serif;
}

.filterbutton {
    position: absolute;
    transform: translate(45px, 405px);
    width: 180px;
    height: 30px;
    border-radius: 20px;
    background-color:white;
    border: 0.5px solid midnightblue;
    cursor: pointer;
    font-family: opensans, sans-serif;
}

.body {
    margin-top: 5px;
    margin-left: 8px;
    font-family: opensans, sans-serif;
}

.noreviewsinfo {
    position: absolute;
    transform: translate(45px, 420px);
    color: white;
    font-size: 30px;
    font-family: opensans, sans-serif;
}

.submitbutton {
    height: 30px;
    width: 80px;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color:steelblue;
    color: black;
    border: 0.5px solid black;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #27496d;
    font-family: opensans, sans-serif;
}

.submitbutton:hover {
    filter: brightness(70%);
    font-family: opensans, sans-serif;
}

.nosearchresults {
    color: white;
    margin-left: 53px;
    margin-top: 5px;
    font-size: 17px;
    font-family: opensans, sans-serif;
}

footer {
    height: 30px;
    width: 100%;
    background-color: gray;
    border: 1px solid black;
}

0 个答案:

没有答案
相关问题
最新问题