Как сделать содержимое 100% высоты и столбцы равной высоты в этом макете?
У меня есть этот макет, где my_menu фиксируется в верхней части, за ним следует заголовок, за которым следует содержимое с 960px и центром, в котором 3 столбца были перемещены влево и, наконец, следуют липкий нижний колонтитул.
Проблема в том, как заставить контент растягиваться до 100% высоты, даже если в каком-либо из дочерних столбцов недостаточно содержимого?
Как сделать 3 столбца равными по высоте независимо от содержимого любого столбца?
Поддерживать липкий нижний колонтитул! Чистый CSS, без JavaScript, без JQuery!HTML-разметка
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
<div id="my_menu">
FIXED MENU WIDTH 100%
</div>
<div id="my_header">
HEADER WIDTH 100%
</div>
<div id="content">
<p>CONTENT 960px</p>
<div id="col1" class="content_columns">
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
</div>
<div id="col2" class="content_columns">
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
</div>
<div id="col3" class="content_columns">
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
</div>
<div class="clear_floats"></div> <!-- For Clearing Floats -->
</div>
<div class="push"></div> <!-- For Sticky Footer -->
</div>
<div id="my_footer">
STICKY FOOTER WIDTH 100%
</div>
</body>
</html>
Стили CSS
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html, body
{
width: 100%;
height: 100%;
}
div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}
div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}
div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}
div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}
div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}
div.clear_floats /* For Clearing Floats */
{
clear: both;
}
div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}
div.push /* For Sticky Footer */
{
height: 70px;
}