-1

I'm displaying a list of results on my results page that require me to scroll, which is fine, but the whole page( nav bar, maps next to results, etc) all scroll down as well. I'm trying to figure out how to get JUST the list if results to be scrollable. I've tried to put 

overflow-y: scroll

on a number of of the div's surrounding the list and 

overflow-y:hidden

on the body to prevent the whole from scrolling down

but nothing seems to work. All I can achieve is a bunch of y - scroll bars that are all unusable, where the outer most scroll is hidden (disabled) and I can't scroll any of the inner most scroll's, even though there is result content below the screen. Can anyone suggest another way to create a scrollable div list on one side of the page while the other side remains unscrollable. Just like Airbnb.com's result page. Or please point me to some examples or Fiddle examples.

Siguza
  • 21,155
  • 6
  • 52
  • 89
chuckd
  • 13,460
  • 29
  • 152
  • 331

2 Answers2

3

Try to give your div a fixed size.

Seb Bizeul
  • 968
  • 1
  • 10
  • 18
  • actually that worked, but how do I make it so that it's the height of the page, even when I drag and resize it? – chuckd Jul 29 '15 at 06:47
  • I'm not sure to understand what you want...Try this, first get a reference of your div in your JS code with getElementById. Then apply yourdiv.height = document.clientHeight; – Seb Bizeul Jul 29 '15 at 06:52
  • do you mean yourdiv.height? or do you mean yourdiv.length? – chuckd Jul 29 '15 at 06:54
  • would that be in some event or something? – chuckd Jul 29 '15 at 06:57
  • No, but like @DylanB says, if you want to dynamically resize you must use an event with onresize. – Seb Bizeul Jul 29 '15 at 06:59
  • its seems obsurd that I would have to make a JS call to resize, I can set div around the list to 100% of the height without calling any JS, why would JS be needed here? – chuckd Jul 31 '15 at 01:12
1

The <div> needs to have a set height but you need this to be responsive. The best way to do this to support older browsers is using JavaScript. This <div> will resize to the current window height upon resize, the width is up to you, if you want it like Airbnb's then you'll need to set the width to 50%.

HTML:

<body onresize="setDiv();" style="overflow-y:hidden;">
    <div id="listResults" style="border: 1px solid black;overflow-y:scroll;">some list results here</div>
</body>

JS:

    function setDiv() {

        var x = window.innerHeight;
        document.getElementById("listResults").textContent = "height: " + x;
        document.getElementById("listResults").style.height = x + 'px';
    }

P.S. I only put the border there so you could see that the div was actually resizing.

DylanB
  • 431
  • 3
  • 16
  • its seems obsurd that I would have to make a JS call to resize, I can set div around the list to 100% of the height without calling any JS, why would JS be needed here? – chuckd Jul 31 '15 at 01:12
  • It is possible with CSS3 but not supported in older browsers so it's up to you. Regardless, once you set the div height you should have a functioning scroll without the window scrolling. – DylanB Jul 31 '15 at 03:01
  • so how would I do it wil CSS3? – chuckd Jul 31 '15 at 05:01
  • You're the one who said using JavaScript was absurd and claimed you could do it without? To achieve this with CSS refer [here](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) – DylanB Jul 31 '15 at 05:05