JSFiddle - React, Tailwind, and code Playground

by SvetaGr

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <link rel="stylesheet" type="text/css" href="ie8.css">
  <![endif]-->
<title>Футер с абсолютным позиционированием</title>
<div id="wrapper">
	<header class="strip"></header>
        <section id="content" class="sales w940 clearfix">
        	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a tristique diam, at porttitor lorem. Vestibulum vel sem vitae est porta aliquam nec sed dui. Vivamus enim nisi, luctus eget augue et, tincidunt scelerisque risus. Proin sodales adipiscing ante at pretium. Sed rhoncus ultrices nisl, ultrices laoreet nunc vestibulum iaculis. Mauris non rutrum libero. Nulla facilisi. Maecenas at nibh commodo, placerat mauris vitae, tempor nibh. Suspendisse neque ante, pretium vel pharetra id, consectetur non odio. Vestibulum fringilla mauris mauris, nec malesuada tellus tristique quis. Cras in volutpat sapien. In varius augue massa, quis fermentum lorem dapibus sit amet. Pellentesque aliquam tempus venenatis. Aliquam mollis purus fermentum erat dictum vulputate.</p>
            <p>----------Основной контент закончился------------</p>
        </section><!-- /.sales -->
		<section id="footer" class="strip clearfix">
    		<article class="center txtStyle_1 w940">
            <p style="color:#fff;">----------- Начинается футер --------</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a tristique diam, at porttitor lorem. Vestibulum vel sem vitae est 						porta aliquam nec sed dui. Vivamus enim nisi, luctus eget augue et, tincidunt scelerisque risus. Proin sodales adipiscing ante at pretium. Sed rhoncus ultrices nisl, ultrices laoreet nunc vestibulum iaculis. Mauris non rutrum libero. Nulla facilisi. Maecenas at nibh commodo, placerat mauris vitae, tempor nibh....

CSS

section, article, small{
	display:block;
}
html, body {height: 100%;}
body {
	margin:0;
}

p{
    margin:0;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
	o-hyphens: auto;
	hyphens: auto;
}
ul{
    list-style:none;
    margin:0;
    padding:0;
}
.w940{
	max-width:920px;
	padding-left:10px;
	padding-right:10px;
	width:auto;
    margin:auto;
}
.w655{
    width:655px;
    margin:auto;
}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}
.clear{
    clear:both;
}
#cntr{
	margin:0 330px;
   /* margin:0 194px;*/
}
.center{
    text-align:center;
}
header{
    position:relative;
    padding:35px 0 20px;
    min-height:92px;
    background:rgba(0, 0, 0, .65);
}
#wrapper{
	position:relative;
	min-height:100%;
    background: url(maneBg.jpg) no-repeat 100% 0;
	background-size: cover;
}
small{
    display:block;
}
#content {
 	/*padding-bottom: 300px;*/
}
#footer {
	position: absolute;
 	bottom: 0;
	left:0;
 	width:100%;
 	color:#bedb00;
 	/*height: 300px;*/
	overflow:hidden;
}
.strip{
    background:rgba(0, 0, 0, .65);
}

JavaScript

$(function(){
		$(window).resize(calcHeight);
		calcHeight();
		});
	function calcHeight(){
		$('#content').css('padding-bottom', $('#footer').height());
	}