Расширить нижний отступ до нижнего края страницы CSS для нижнего колонтитула - PullRequest
0 голосов
/ 13 июля 2020

Я делаю нижний колонтитул в CSS и HTML, который разделен 50/50 вверху и представляет собой всего одну строку текста внизу. Я хочу, чтобы мой нижний колонтитул был цвета #f7f6f5, и это так, но я хочу, чтобы он распространялся до нижней части страницы. Я пробовал использовать bottom:0;, но это не сработало.

Итак, я пытаюсь полностью расширить нижний отступ, я пробовал padding-bottom:100%;, но это просто расширяет нижний колонтитул далеко за пределы страницы.

Мои текущие HTML и CSS:

.rightfooter {
  padding: 0;
  float: right;
  width: 50%;
}

.leftfooter {
  padding: 0;
  float: left;
  width: 50%;
}

@media screen and (max-width: 800px) {
  .leftfooter, .rightfooter {   
    width: 100%;
    padding: 0;
  }
}

footer {
    background-color: #f7f6f5;
    bottom: 0;
    width: 100%;
}

.fc {
    height: 100px;
}

section {
    padding-right: 100px;
    padding-left: 100px;
    bottom: 0;
}
<footer>
<hr class="divider" color= "#1d70b8">
    <section>
            <div class="fc">
                <!-- Far Left -->
                <div class="leftfooter">
                    <p><strong>Contact Us:</strong><br>w: <a style="color:#333333;" href="/">sammon.uk</a><br>e: <a style="color:#333333;" href="mailto:info@sammon.uk">info@sammon.uk</a><br>t: <a style="color:#333333;" href="callto:01226697393">01226 697393 (UK)</a></p>
                </div>

                <!-- FAR Right -->
                <div class="rightfooter">
                    <p><strong>Copyright:</strong><br>© Copyright 2019-<script>document.write(new Date().getFullYear())</script>. ® All Rights Reserved. <a href="/policies/copyright" style="color:#333333;">Find out more</a>.</p>
                </div>
            </div>
            <div style="width: 100%;">
                <hr>
                <p>© Copyright 2019-<script>document.write(new Date().getFullYear())</script>. ® All Rights Reserved. <a href="/policies/copyright" style="color:#333333;">Find out more</a>.</p>
            </div>
    </section>
</footer>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...