Member Avatar for qazplm114477

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.

Edited by qazplm114477 because: n/a
  • 3 Contributors
  • 3 Replies
  • 129 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by qazplm114477

Dani AI

Generated

Two viable directions are already visible in the thread: used a script to measure the main content and set the sidebar height (which solved the OP's immediate case), while suggested a repeating background as a simpler visual fix. For a robust, long-term solution it helps to pick one of three strategies depending on browser support and how the layout should behave.

A modern, CSS-only approach is Flexbox: make the page wrapper a flex container so both columns automatically stretch to the same height. This avoids manual height math and works well across current browsers. If the sidebar should always fill the viewport height regardless of content, viewport units (vh) are simpler and precise.

/* wrapper makes columns equal height */
.wrapper {
  display: flex;
  align-items: stretch;
}
.content { flex: 1; }
.sidebar { width: 220px; }

/* or force sidebar to at least viewport height */
.sidebar { min-height: 100vh; }

If a pure-CSS option is not possible (legacy browsers or content injected after load), a small script can be used as a fallback. The script should set min-height based on the larger of the document scroll height and the viewport height, run on load and resize, and be debounced. Also re-run it after any asynchronous content is appended (a MutationObserver helps for dynamic pages).

Troubleshooting checklist: ensure the sidebar is in normal flow (not absolutely positioned), check that parent elements have heights defined if using percentage-based sizing, and avoid relying on height:100% alone unless html/body have explicit heights (see MDN on how percentage heights work). For Flexbox basics and browser support see the MDN Flexbox guide and the MDN notes on viewport units.

Recommended Answers

All 3 Replies

Member Avatar for colweb

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 for Member #120589

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.

Edited by Member #120589 because: n/a
Member Avatar for qazplm114477

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, networking, learning, and sharing knowledge.