Прижимаем footer к низу окна браузера

22 октября 2015 г. 08:38:40, 884 просмотра

Html верстка:

<div class="wrapper">
	<div class="header">
		<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque.
	</div><!-- .header-->
	<div class="content">
		<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue.
	</div><!-- .content-->
</div><!-- .wrapper -->
<div class="footer">
	<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis.
</div><!-- .footer -->

Css стили:

* {
	margin: 0;
	padding: 0;
}
html {height: 100%;}

body {
	width: 100%;
	height: 100%;
}
.wrapper {
	width: 1024px;
	margin: 0 auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

/* Header
-----------------------------------------------------------------------------*/
.header {height: 50px;position: relative;}

/* Middle
-----------------------------------------------------------------------------*/
.content {padding: 0 0 77px;}

/* Footer
-----------------------------------------------------------------------------*/
.footer {
	width: 804px;
	margin: -77px auto 0;
	height: 77px;
	position: relative;
}

html, css