Мой нижний колонтитул застрял в середине страницы - PullRequest
Новая
       13

Мой нижний колонтитул застрял в середине страницы

0 голосов
/ 05 апреля 2020

У меня проблема с тем, что нижний колонтитул моей страницы переместился вверх и застрял на картинке. Эта проблема не возникала, и я не уверен, как ее исправить.

При входе на сайт: https://gyazo.com/bcd6fe2f9514e761035deee64d820e22 После прокрутки вниз: https://gyazo.com/cb9b9917d7d1730484c18a093b2a5f12

Вот часть кода для индекса. php

html {
    scroll-behavior: smooth;
}

body,

.cover {
    height: 100%;
}

.cover {
    background: url('img/main.jpeg') top left no-repeat;
    background-size: cover;
    display: table;
    width: 100%;
    padding: 20%;
    box-shadow: inset 0 0 100px #000;
}

.cover-text {
    text-align: center;
    color: white;
    display: table-cell;
    vertical-align: middle;
}

.cover-text h1 {
    margin: 0;
    font-size: 70px;
    letter-spacing: -3px;
}

nav.navbar-inverse {
    background: rgba(0, 0, 0, 0.5);
    border: none;
}

.the-quote {
    background: #222;
}

blockquote1 {
    border: none;
    margin: 0;
    font-family: Georgia, Times, serif;
    font-style: italic;
    font-size: 32px;
    color: white;
}

blockquote1 cite {
    display: block;
    text-align: right;
    text-transform: uppercase;
    font-family: Helvetica, Arial, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: bold;
    color: #888;
    margin-top: 40px;
}

section {
    padding: 100px;
}

h2 {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 60px;
}

h2 + p {
    text-align: center;
    margin-top: -60px;
}

#team {
    background: url('img/fan.jpg') top left no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
}

#reviews p {
    color: black;
}
#reviews h4 {
    font-weight: 600;
}

#reviews {
    text-align: center
}

#contact-us {
    background: url('img/straighten.jpg') left no-repeat;
    background-size: cover;
    text-align: center;
}
footer {
    background: #222;
    color: black;
    text-align: white;
    padding: 20px;
    font-family: Georgia, Times, serif;
    position:absolute; 
    bottom: 0; 
    width: 100%;

}

footer a {
    color: hotpink;
}

@media only screen and ( max-width : 568px ) {
    .cover h1 {
        font-size: 40px;
    }
    section {
        padding: 20px;
    }

}

.login-cover {
    background: #333;
    background-size: auto;
    padding-top: 300px;
    min-height: 93.8vh;
    min-width: 100vw;
    color: black;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Modern Haircut Designs</title>

    <!-- Bootstrap Stuff -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Coursework Style that's seperate -->
    <link href="coursework_style.css" rel="stylesheet">

</head>
<body>

    <nav class="navbar navbar-fixed-top navbar-inverse">
        #My navigation bar code
    </nav>

    <div class="cover" id="top">
        <div class="cover-text">
            <h1>Professional Haircut Service at its finest</h1>
            <p class="lead">It's your haircut so why not choose the exact date, time and barber of your preference.</p>
            <a href="coursework_register.php" role="button" class="btn btn-danger btn-lg">Sign up by clicking right here!</a>
        </div>
    </div>

    <section class="the-quote">
        # Quote 
    </section>

    <section id="services">
        #List of the services we offer
    </section>

    <section id="team">
        # Team members
    </section>

    <section id="reviews">
       #Reviews
    </section>

    <section id="contact-us">
       #Contact-Us information
    </section>

    <!-- jQuery for javascript stuff-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap javascript code / might remove tho -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

<footer>
    crafted with &hearts; in Bangladesh by <a href="#Random Link">Roman Ryan Karim</a>
</footer>
</html>

Прежде чем эта ошибка сохранялась, нижний колонтитул раньше появлялся под разделом contact-us, однако теперь он отображается как экземпляр go на веб-сайте и застрял там. Может кто-нибудь помочь? Я не против поделиться большим количеством кода, если он вам нужен.

1 Ответ

0 голосов
/ 05 апреля 2020

Попробуйте удалить абсолютную позицию из нижнего колонтитула

...