Home › Forums › Support › fixed page height? › Reply To: fixed page height?
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.