Как исправить нижний колонтитул в конце страницы?
Существует спецификация, которую поддерживает множество драйверов, называемая DBRef.
DBRef - это более формальная спецификация для создания ссылок между документами. DBRefs (обычно) включают имя коллекции, а также идентификатор объекта. Большинство разработчиков используют только DBRefs, если коллекция может измениться с одного документа на другой. Если ваша ссылочная коллекция всегда будет одинаковой, рекомендации по руководству, описанные выше, более эффективны.
blockquote>Взято из MongoDB Документация: Модели данных> Ссылка на модель данных> Ссылки на базы данных
3 ответа
Вы установили master-footer-wrap и само footer в фиксированное положение. Тем не менее, вам нужно установить position: relative для тела и absolute для нижнего колонтитула. Если вы сделаете это, когда footer или master-footer-wrap по-прежнему установлены на position: fixed, оно останется фиксированным. Посмотрите приведенный ниже фрагмент для рабочего примера:)
/*BODY*/
html, body {
position: relative;
height: 150%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
/* removed master footer wrap css */
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: absolute; /* position absolute instead of fixed */
bottom: -50px; /* move inside the body margin */
left: 0;
right: 0;
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
/* Removed redundant div/wrapper */
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}<footer>
<a href="/"><img id="footer-logo" src="/assets/images/logo-white.png"><a/>
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li><a href="/termos-de-uso">Termos de Uso</a></li>
<li><a href="/politica-de-privacidade">Política de Privacidade</a></li>
</ul>
</footer>Самое простое решение - использовать flexbox. Вот рабочая скрипка с использованием библиотеки Tailwind:
<div class="flex flex-col min-h-screen">
<header class="h-8 bg-red">
</header>
<main class="flex-1">
The main content
</main>
<footer class="h-8 bg-green">
</footer>
</div>
https://jsfiddle.net/nartub/b4fwg3um/
Классы говорят сами за себя, но вы можете обратиться к документам Tailwind, чтобы увидеть, что делает каждый класс.
Ваш CSS может быть значительно упрощен. Вам не нужны все эти баннеры и обертки. Просто установите position: absolute; bottom: 0px; и удалите отступы внизу страницы, и ваш нижний колонтитул будет зависать.
Должен быть какой-то способ избавиться от того жестко закодированного #footer-logo материала, который заставляет текст перекрывать логотип, когда ширина становится меньше, но я не могу понять это.
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
footer {
font-family: "Comic Sans MS", sans-serif;
font-size: 14px;
text-align: center;
color: #C8C7CC;
background-color: black;
position: absolute;
bottom: 0px;
min-height: 50px; /* improved support for narrow screens */
width: 100%;
}
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
footer ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
footer ul li {
display: inline-block;
padding-top: 17px;
padding-left: 15px;
}<footer>
<a href="#"><img id="footer-logo" src="//stackexchange.com/users/flair/6784526.png" /></a>
<ul>
<li>