Magearlik Magearlik - 5 months ago 7
CSS Question

CSS: How do I stretch a background with a different z-index to height of page contents

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>

Answer

How about this? changing absolute to fixed?

<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: fixed;
        z-index: 0;
    }
    #purple_block_right
    {
        width: 70%;
        background-color: #9966cc;
        height: 100%;
        right: 0px;
        top: 0px;
        position: fixed;
        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>

Comments