Я делаю нижний колонтитул в 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>