I have an outer div with max-height of 800px.
Within that I could have one or two divs (depends of results from mysql query), the second of which should always be fixed to the bottom of its parent. I can do this with absolute positioning but how do i resize the first child to take the second absolutely positioned div into account?
If only one div is created then I want it to take up the full height of its parent.
Any ideas on how to do this.
Please help!
I would recommend using jQuery or some other easy to use javascript DOM manipulation library. Setting the proper height is then very easy:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container {
height: 400px;
background-color: #99CCFF;
position: relative;
top: 0;
left: 0;
}
.first {
background-color: #FFCCFF;
width: 100%;
}
.second {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: #CCFFCC;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var height = $('.container').height() - $('.second').outerHeight();
$('.first')
.height(height);
});
</script>
</head>
<body>
<div class="container">
<div class="first">
<h1>This is first div.</h1>
</div>
<div class="second">
<h1>This is second div.</h1>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
</body>
</html>
create a div out of site (left:-9999px) with max-height of 800px, add element(s) to it, measure height of the inner div(s), then apply results to actual displayed div. dont forget to remove out of site div once finished
in this solution, if the first div is 'alone' he will take the full container space ( just assign the Alone class. and if there are two div's, the first div will take the space that he needs, and he second div will always fill the remaining gap.
HTML: (a very simple one)
<h5>When the first is 'alone'</h5>
<div class="Container">
<div class="First Alone">Some Content</div>
</div>
<h5>When there are two div's</h5>
<div class="Container">
<div class="First">Some Content</div>
<div class="Second">Some Content</div>
</div>
CSS:
.Container
{
max-height: 800px;
/*for demonstration only*/
height: 100px;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: green;
}
.Alone
{
height: 100%;
}
.Second
{
/*for demonstration only*/
background-color: red;
}
.Second:after
{
content: '';
clear: both;
display: block;
}