jannik/web-jbeyerstedt
1
0
Fork 0
Code Releases Activity

[SITE CSS] solve sticky footer with CSS calc() only, no position: absolute any more

Browse source
This commit is contained in:
Jannik Beyerstedt 2016-10-28 21:22:28 +02:00
parent e652bae824
commit 30aaa46456
6 changed files with 65 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

52
assets/scss/main.scss
View file

@ -21,8 +21,8 @@ h1, h2, h3, h4 {
margin-top: 1em;
font-family: 'Crimson Text', serif;
}
main h1:first-child {
margin-top: 0.4em;
main h1:first-child, main div.container:first-child {
margin-top: 0;
}
h5 {
margin-bottom: 8px;
@ -93,12 +93,12 @@ main div.container {
$header_logoSize: 75px;
$header_logoPadg: 4px;
header {
img {
width: $header_logoSize;
height: $header_logoSize;
margin: 4px 0;
margin: $header_logoPadg 0;
float: left;
}
@ -184,11 +184,15 @@ nav {
$footer_logoHeight: 1.4rem;
$footer_margin: 25px;
$footer_height: 70px;
$footer_height_xs: 175px;
footer {
margin-top: 20px;
margin-top: 25px;
padding-top: 15px;
padding-bottom: 10px;
height: $footer_height;
min-width: inherit;
background-color: $footer_color_bg;
@ -226,36 +230,22 @@ footer {
}
/* make footer sticky */
$footer_height: 70px;
$footer_height_xs: 175px;
$footer_margin: 30px;
html {
position: relative;
min-height: 100%;
}
@include media-breakpoint-up(sm) {
body {
/* Margin bottom by footer height */
margin-bottom: $footer_height + $footer_margin;
}
@include media-breakpoint-down(xs) {
footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height;
height: $footer_height_xs;
}
}
/* space footer at bottom of page */
$header_height: 2*$header_logoPadg + $header_logoSize;
@include media-breakpoint-up(sm) {
main {
min-height: calc(100vh - #{$header_height} - #{$footer_height} - #{$footer_margin});
}
}
@include media-breakpoint-down(xs) {
body {
/* Margin bottom by footer height */
margin-bottom: $footer_height_xs + $footer_margin;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: $footer_height_xs;
main {
min-height: calc(100vh - #{$header_height} - #{$footer_margin});
}
}

9
assets/scss/templates/home.scss
View file

@ -8,10 +8,10 @@
@import "../mainvariables";
main {
padding-top: 14vh;
div.home {
text-align: center;
margin-top: 15vh;
margin-bottom: 20vh;
div.logo {
font-family: 'Boon-Logo', "Verdana", "Arial", sans-serif;
@ -46,8 +46,7 @@ main {
}
@include media-breakpoint-down(xs) {
main div.home {
margin-top: 13vh;
margin-bottom: 17vh;
main {
padding-top: 16vh;
}
}