#css #gatsby
#css #gatsby
Вопрос:
Итак, я поместил свой контент в компонент layout, а все остальные мои страницы переместили нижний колонтитул вниз, потому что содержимое больше, чем фактический экран. Однако у меня есть одна страница с меньшим содержанием, и теперь мой нижний колонтитул находится неловко посередине, если я просматриваю его на экране большей высоты.
Итак, вот мой css нижнего колонтитула
export const FooterContainer = styled.div`
background-color: #101522;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
`
Мой макет div css
.layout {
padding-bottom: 160px;
position: relative;
}
Мой компонент макета
return (
<>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle} />
<div className="layout">
<main>{children}</main>
<Footer />
</div>
</>
)
}
Затем на моей странице, где мой нижний колонтитул не прилипает к низу, это мой код
<Layout>
<div className="resource__container">
<h1 className="post__heading">
Here are some resources to learn web development
</h1>
<Posts posts={posts} key={posts.id} />
</div>
</Layout>
Итак, вот рисунок, показывающий, что происходит
Верхняя черная полоса — это панель навигации
Красный раздел — это мой .resource__container
Пустое пространство под ним — это padding-bottom: 160px
из .layout <div>
Тогда последний черный пробел — это footer
После этого там просто <main>
, но технически ничего нет, поэтому я не понимаю, почему он не прилипает к основанию
Комментарии:
1. Установлена ли высота вашей главной страницы на 100%?
2. Я попытался добавить это, но тогда мой нижний колонтитул появится на экране мобильного устройства и испортит дизайн моего поста в блоге, поэтому не уверен, что я там сделал не так
Ответ №1:
Учитывая структуру HTML, такую как:
<body>
<header>…</header>
<main>…</main>
<footer>…</footer>
</body>
Решение для размещения нижнего колонтитула внизу — это использование flexbox:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
Ключ min-height: 100vh
— это, а также, flex: 1
main
тег.
Полезные ресурсы: