$footer-height: 42pt;
html,
body {
height: 100%;
flex: auto;
}
footer {
height: $footer-height;
position: sticky;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
}
#content {
min-height: calc(100% - 42pt * 3);
right: auto;
padding: 42pt;
}
#footer-left {
margin-top: auto;
margin-bottom: auto;
margin-left: 24pt;
justify-self: left;
margin-right: auto;
display: inline-flex;
}
#footer-right {
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
justify-self: right;
margin-right: 24pt;
align-content: center;
display: inline-flex;
}
#footer-center {
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
justify-content: center;
justify-self: center;
display: inline-flex;
}
* {
padding: 0;
margin: 0;
}
#footer-right *{
display: flex;
margin-top: auto;
margin-bottom: auto;
}
#footer-center *{
display: flex;
margin-right: 8pt;
margin-left: 8pt;
margin-top: auto;
margin-bottom: auto;
justify-content: center;
align-items: center;
}
article {
margin-top: 42pt;
margin-inline: auto;
padding: 4em;
}