Я пытаюсь заставить свой нижний колонтитул придерживаться нижней части моей страницы. Я следил за множеством различных учебных пособий (большинство из которых очень похожи) на липких нижних колонтитулах, но ни один из них не помог мне. По какой-то причине нижний колонтитул прилипает к нижней части экрана вместо страницы ...

Это макет div в моем HTML:

<div id="wrapper">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>

Это мой CSS:

html, body {
height: 100%;

#wrapper {
min-height: 100%;
position: relative;
}

#content {
position: absolute;
padding-bottom: 300px; (same as footer height)
}

#footer {
width: 100%;
height: 300px;
position: absolute;
bottom: 0px;
}