Equal height divs - complicated with multiple backgrounds
I'm trying to create a website and it's design is forcing me to use multiple backgrounds. I'm talking about a technique that looks like this
<div id="left">
<div id="left_1">
<div id="left_2">
</div>
</div>
</div>
#left{
width:235px;
margin:0; padding:0; float:left;
background:url(../images/left_middle.jpg) top left repeat-y;
}
#left_1{
width:235px;
margin:0; padding:0; float:left;
background:url(../images/left_top.jpg) top left no-repeat;
}
#left_2{
width:218px;
margin:0; padding:0 0 0 17px; float:left;
background:url(../images/left_bottom.jpg) bottom left no-repeat;
}
At the same time a have to create an equal div/column height structure for the page.
<div id="container">
<div id="left">
<div id="left_1">
<div id="left_2">
开发者_运维技巧 </div>
</div>
</div>
<div id="center">
</div>
<div id="right">
<div id="right_1">
<div id="right_2">
</div>
</div>
</div>
</div>
The #left, #center and #right divs should have the same height and look full with background. I have read a lot of techniques through internet about the equal-height-divs but adding the multiple backgrounds issue, makes it impossible for me to find a solution here.
I was wondering if someone could help me out there. Thanks in advance
if you don't mind using javascript/jquery, you can add this to your html:
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
// get the heights
l = $('#left_2').height();
r = $('#right_2').height();
c = $('#center').height();
// get maximum heights of all columns
h = Math.max(c, Math.max(l, r));
// apply it
$('#left_2').height(h);
$('#right_2').height(h);
$('#center').height(h);
});
</script>
Save yourself the trouble and just use tables for the outer layout. They just work.
Here's the table example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>left</title>
<style type="text/css">
.side { background-color:blue;color:white;width:235px;vertical-align:top;margin:0px;padding:0px;}
.left3 {padding:0px 0px 0px 17px;vertical-align:top;}
.mainContent {margin:0px;vertical-align:top;}
table {width:100%;height:100%;border-collapse:collapse;}
html,body{width:100%;height:100%;margin:0px;}
</style>
</head>
<body>
<table>
<tr>
<td class="side">left
<table>
<tr><td class="side">left side 2
<table><tr><td class="left3">Left Side 3</td></tr></table>
</td></tr>
</table>
</td>
<td class="mainContent">center</td>
<td class="side">right</td>
</tr>
</table>
</body>
</html>
加载中,请稍侯......
精彩评论