Issue
I have two sections.
The first one contains content of the imprint: company-section.
The second one is the footer: footer-section, which should always be on the bottom. So I want to create space between them.
I tried to add margin-bottom: auto; to my company-section but it's not working.
#company-section{
display: flex;
flex-direction: column;
align-items: center;
}
.company-alignment {
width: 100%;
max-width: 1240px;
}
#footer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#login-section {
margin-bottom: auto;
}<body id="login-section">
<section id="company-section">
<div class="company-alignment">
<p>Imprint</p>
</div>
</section>
<section id="footer-section">
Hi
</section>
</body>Solution
Set the body element to a flex container with a column direction. The #company-section is set to take up the available space using flex: 1, and the #footer-section is pushed to the bottom using margin-top: auto. This will create the required layout with space between the two sections and the footer always at the bottom.
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Ensure the body takes at least the full height of the viewport */
}
#company-section {
flex: 1; /* Allow #company-section to take up remaining space */
display: flex;
flex-direction: column;
align-items: center;
}
#footer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto; /* Push #footer-section to the bottom */
}
Answered By - coder
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.