Hi, I'm not an expert when it comes too designing. so i was wondering if anyone could help me.

I have a page that generates A LOT of data from the database via php and puts it in a table so I can never determine the current height of the window/web page.

and the problem is that I have a <div> on the left acting as a sidebar with links in it, but that div doesn't have the current height of the window when the page loads and just cuts off in the middle.

height:100% doesn't work

I used jquery

<script type='text/javascript'>
$("#leftpanel").css("min-height", $(document).height());
</script>

it worked but it won't stretch far enough if there's to too much data or if the page is too long

thanks to anyone who can help. I don't really know what to do.

Recommended Answers

All 3 Replies

First you need to get the height of the table

var divHeight = document.getElementById('TheTable').offsetHeight;

The table must have an id. In the above code line the id = TheTable.
Then you set the height of the div like so:

document.getElementById('div_left').style.height = divHeight+'px';

And the div must have an id also, in this case div_left.

Member Avatar

Are you saying that your sidebar seems to be dangling when the main area is longer than the cut of the page? Personally, I wouldn't bother with JS or try to make an exact height. Why don't you just have a repeating background image via the body element (or a whole page / below nav wrapper div).
Seems like a lot of phaph to me.

However, this is not to rubbish js solutions already presented. They seem very good.

First you need to get the height of the table

var divHeight = document.getElementById('TheTable').offsetHeight;

The table must have an id. In the above code line the id = TheTable.
Then you set the height of the div like so:

document.getElementById('div_left').style.height = divHeight+'px';

And the div must have an id also, in this case div_left.

thanks again col. everything's working now.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.