So I am building a webpage and I can't find a way to dynamically stretch the background (with a different z-index) to the start of the page footer. I have searched for javascript, jquery and css approaches but no dice. Anyone know how to do this? Here is my code:
<html>
<head>
<style>
*
{
list-style: none;
text-decoration:none;
padding: 0;
margin: 0;
}
html
{
margin: 0 auto;
width: 100%;
background: #ccc;
}
body
{
margin: 0;
padding: 0;
}
#page
{
width: 100%;
}
#grey_block_left
{
width: 30%;
background-color: #333333;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#purple_block_right
{
width: 70%;
background-color: #9966cc;
height: 100%;
right: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#content
{
width: 70%;
margin: 0 auto;
background-color: #fff;
height: 1000px;
position: relative;
z-index: 5;
margin-top: 150px;
margin-bottom: 50px;
padding: 20px;
}
#footer
{
position: relative;
z-index: 5;
width: 100%;
height: 300px;
background-color: #333;
color: white;
}
</style>
</head>
<body>
<div id="page">
<div id="grey_block_left"></div>
<div id="purple_block_right"></div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire