Reply To: fixed page height?

[David]

Hi there,

so this CSS you have on your site to force the footer to the bottom of the viewport:

html,
body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
}

#page {
    flex: 1 0 auto;
    width: 100%;
}

The way this works is that the body becomes a flex column. Elements within this can be manipulated for size and position. Your #page ( the content ) has a flex: 1 0 auto; property, this is shorthand for flex-grow: 1 ( True – i can and will grow ), flex-shrink: 0 (False – i will not shrink ) and flex-basis: auto ( the preferred height, in the case of a flex column, that i want to be).

So the additional space below the content is responsive. Although you could change the flex property to set a preferred size it would mean the footer would also move up…. so there isn’t really a solution to this without allowing the footer to float up.