0

I have a simple page with a fixed sidebar (navigation) and a content area that scrolls normally. Sidebar position:fixed, content area normal.

The sidebar (if taller than the browser) uses a scroll bar to show the rest of the sidebar content. Thats cool, it works like its supposed to.

I'm trying to get the sidebar, onload, to set its height as tall as its contents, so there is no scrolling. So if the sidebar is 2000px tall with all the content loaded in, onload the height is set to 2000px so there is no scrollbar. It will just make the fixed sidebar 2000px high.

Is this a min-height issue? I feel like there is a simple way to do this but I have been at it so long I cant figure it out. Ive used scrollHeight, height(); etc. and cant get a solution.

Thanks

user3869231
  • 342
  • 1
  • 4
  • 19

2 Answers2

0

Remove the css height to allow the div to expand, set overflow:none;

Otherwise similar questions and answers here:

Make div 100% height of browser window

Community
  • 1
  • 1
Bryan
  • 100
  • 6
0

This is what I understand from the question, since there is no code submitted.

If you "mesure" contents height after pageload, you can set your sidebar height to this value.

document.ready(function(){
    contentHeight = $("#content").css("height");
    // set sidebar height
    $("#sidebar").css({"height":contentHeight});
});

Place it at the end of the page, so it will be executed after pageload.
I'm not sure this will remove the scrollbars, since it appears when height is more than viewport. You'll have to set css for the sidebar to overflow:hidden.

Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • thank you, i will try this tomorrow. for some reason, no matter what jquery i use, the sidebars height is always equal to the viewport height, when it really should be equal to the height of the actucal content. I think you may be onto something, i thank you greatly. – user3869231 May 10 '16 at 04:49