Search code examples
htmlcsswebshop

change sidebar height by page length

I am building a webshop with on the left side a sidebar with a sort of navbar in it. But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.

This is my CSS for the background:

.sidebar {
    z-index:            10;
    border-top:         2px #000000; 
    position:           absolute; 
    float:              left; 
    left:               0; 
    margin-top:         -5%; 
    padding-bottom:     -10px; 
    width:              15%; 
    min-height:         115%;
    max-height:         200%;
    background:         #C6A970;
}

Does anyone have an idea how to cover the left side of my webpage?

Thanx in advance!

Solution

  • according to the informations you gave you probably search something like that:

    Fiddle

    Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.

    We could help a little better if you provide full code.