How to increase Side-bar Height dynamically?

Question

I have created a html page that contains header, sidebar and in between there is a blank page which contains products..It works fine with limited products but after adding many products the page size increase but sidebar height remains same, and half of the page has side bar and half does't have any..Kindly guide me how to stretch the sidebar to the page length.

If i increase Height from here it gives sets the sidebar height, but i can give it a fix value because there can be any number of products in a page.

element.style {
    height: 843px;
}
aside#sidebar {
    background: url("../images/sidebar.png") repeat scroll 0 0 #E0E0E3;
    float: left;
    margin-top: -4px;
    min-height: 500px;
    width: 23%;
}
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
    display: block;
}

Try giving sidebar and the products container, `display: table-cell`. — Mr_Green, Apr 17 '14 at 07:57
why not just do a resize function in javascript? .. http://stackoverflow.com/questions/641857/javascript-window-resize-event ---- https://api.jquery.com/resize/ — John Ruddell, Apr 17 '14 at 08:06
"header, sidebar and in between there is a blank page which contains products" `in between` sidebar and header? did you mean aside the side bar..? and by `blank page` did you mean a `
`? — T J, Apr 17 '14 at 08:10

T J · Answer 1 · 2014-04-17T09:19:42.170

apply position:relative to your page having products, and absolutely position the sidebar inside it by applying

aside#sidebar {
 position:absolute;
 background: url("../images/sidebar.png") repeat scroll 0 0 #E0E0E3;
 top: 0;
 left:0;
 bottom:0;
 width: 23%;
}

apllying top:0; and bottom:0 will cause the element to always stretch to the height of it's container. Also apply padding for the container equal to the sidebar so that it's contents won't be hidden.

Something like this JSFiddle

score 1 · Answer 2 · answered Apr 17 '14 at 08:05

1

make your sidebar css like .sidebar{width:100%; float:left;}it will get the parent width .sidebar:after{clear:left} and remove the height which you mentioned like height: 843px; Hop this will help you

answered Apr 17 '14 at 08:05

score 1 · Answer 3 · answered Apr 17 '14 at 08:08

One way that you can do this is to measure the scrollHeight of the products div and set the min-height of the sidebar accordingly.

Do this whenever your products div's height changes:

$(".sidebar").css("min-height", document.getElementById("content").scrollHeight);

JSFiddle

You could also just set it to the height of the element:

$(".sidebar").css("min-height", $(".content").height());

How to increase Side-bar Height dynamically?

3 Answers3

JSFiddle

JSFiddle