100% height Columns
Hi all
I have a jsfiddle here: http://jsfiddle.net/EhN23/
And demo here: http://www.ttmt.org.uk/col/
I’m sure this really simple.
I have a left and a right column in a containing div the containing div has min-height:100%;
and the html,body has height:100%;
I want the columns to be 100% height of the avaiable space with min-height:100%;
Why doesn’t this work?
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
}
#wrap{
min-height:100%;
}
#content{
padding-bottom:50px;
min-height:100%;
}
header{
height:100px;
background:green;
}
.col{
height:100%;
}
#left-col{
background:#ccc;
margin-right:320px;
}
#right-col{
background:#888;
width:300px;
float:right;
}
footer{
position:relative;
margin-top:-50px;
height:50px;
background:red;
}
</style>
<title>Title of the document</title>
</head>
<body>
<div id="wrap">
<header>
<h2>Header</h2>
</header>
<div id="content">
<div id="right-col" class="col"><h2>Col 2</h2></div>
<div id="left-col" class="col"><h2>Col 1</h2></div>
</div>
</div>
<footer>
<h2>Footer</h2>
</footer>
</body>
</html>