Растяжение по высоте независимо от контента
Добрый день! Помогите пожалуйста кто может, я ещё далеко не опытный верстальщик и поэтому даже 2
часа мучений не дали желаемого результата.
Есть такая html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Шаблон страницы</title>
<meta http-equiv="Content-type" content="text/html; charset2=utf-8" />
<meta name="description" content="{% block meta_description %}{{ meta_description }}{% endblock %}">
<meta name="keywords" content="{% block meta_keywords
%}{{ meta_keywords }}{% endblock %}">
<link
rel="stylesheet" href="{{ MEDIA_URL }}css/style.css">
{% block extrahead %}{% endblock %}
</head>
<body>
<div id="page-wrap">
<div id="page">
<div id="body">
<div id="header">
<!-- шапка -->
</div>
<div id="content">
</div>
</div>
<div id="footer">
<!-- футер -->
</div>
</div>
</div>
</body>
</html>
и вот такой css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#page-wrap {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#page {
width: 100%;
min-width: 900px;
height: 100%;
}
#body {
width: 100%;
height: auto;
min-height: 100%;
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 100px;
margin: 0;
padding: 0;
background-color: #00ff00;
}
#content {
width: 90%;
margin: 0;
padding: 0 0 40px; /* отступ снизу на высоту футера */
background-color: #03F;
margin:0 auto;
height: 100%;
}
#footer {
width: 100%;
height: 40px;
margin: -40px 0 0; /* отрицательный отступ сверху на высоту футера */
padding: 0;
background-color: #ff0000;
}
Вся проблема в том, что когда content ничем не заполнен, то синий фон не растягивается по высоте на всё свободное пространство. Убил уже кучу времени, переставляю height то потомку, то родителю, но всё ровно всё криво получается, либо не получается вообще. Желательно всё это смастерить на css. В крайнем случае уже js или jquery...
