Как привязать footer к низу экрана в Bootstrap 3?

Question

[Niko Frost]

Я использовал такую структуру:
HTML:'

<footer class="footer">
		<div class="container-footer">
			<p class="text-muted text-center">&copy; 2015</p>
		</div>
</footer>

CSS:

html {
	min-height: 100%;
}

body {
        /* Margin bottom by footer height */
	margin-bottom: 50px;
}

.footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #222;
}

.container-footer {
	padding: 5px 0;
}

.container-footer .text-muted {
	color: #fff;
	margin: 10px 0;
}

Но потом, при изменении размера браузера (высоты), этот footer закрывает весь контенет.
Он поднимается вверх.

Answer 1

[Сергей Ст]

html {
		position: relative;
		min-height: 100vh;
	}
	body {
		margin-bottom: 4em;
	}
	.footer {
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4em;
		line-height: 4em;
		position: absolute;
		background-color: #ccc;
	}