5

Simple example with div below another div, the first one displays a video with a 100% width, the other one's got some overflowing text inside.. all I want is to scroll the second div instead of a whole page:

<div id="bot" style="overflow:auto;">

http://jsfiddle.net/H7uhM/1/

//edit I removed z-index because it's a leftover from the master code. The height of video may vary, and that's why setting the #bot div to a constant height is not the solution. The video depends on a ration my have between 35%-50% of the page's height.

Pete Kozak
  • 493
  • 1
  • 4
  • 21

3 Answers3

7

you need to change your style to be overflow-y: scroll; and you need a height otherwise the element will continue growing to accommodate the contents.

Example:

<div id="bot" style="overflow-y:scroll; height: 250px;">

Also, the z-index was irrelevant

If you want to use Javascript, you can achieve your desired effect like this:

<script>
window.onload = function () { 
    var bot = document.getElementById('bot');
    bot.style.height = (window.innerHeight - document.getElementById('top').offsetHeight) + "px";
}
</script>

JSFiddle

JRulle
  • 7,448
  • 6
  • 39
  • 61
  • but what if I dont know the height? let's say it's something between 40%-60% of page.. – Pete Kozak Jul 15 '14 at 17:01
  • Without giving the DIV some kind of limitation how would it know when to start scrolling? If you can use javascript, you could set it's height to (total viewport height - other content height) [This previous Stack Overflow question may help you out](http://stackoverflow.com/questions/15580356/filling-remaining-vertical-space) – JRulle Jul 15 '14 at 17:07
  • I was trying to avoid JS in this example but I think I would stay with it.. it doesn't look like there is a nice/easy css solution so I take your answer as a working solution. Thanks mate, much appreciated. – Pete Kozak Jul 16 '14 at 16:03
3

You must give a height to your #bot div

zgood
  • 12,181
  • 2
  • 25
  • 26
  • but is it possible without adding a height, let's consider that videos above may have different ratios? – Pete Kozak Jul 15 '14 at 17:00
  • @PeteKozak Without giving it a height how would it know when to start scrolling? You can use `max-height` to set the threshold. Or if you want to set your height dynamically then you could use javascript – zgood Jul 15 '14 at 17:13
0

You can try something like this, adding a height to your #bot div:

<div id="bot" style="overflow:auto;z-index:3;height:200px;">

EDIT

In case you want this captions container to be fluid, remember that in order to set the height of a container in percentage, its parent container needs to have an explicit height (i.e. in px for instance).


So you need you can set the height of the main container in this case in px:

<div id="box" style="height:600px">


And then you can set the height of your box in percentage:

  <div id="bot" style="overflow:auto;z-index:3;height:20%;">


You can test it here: http://jsfiddle.net/H7uhM/11/

Ps. Another thing, I suggest you to get rid of all these inline styles for CSS.

HTML for structure
CSS for presentation
JS for behaviour

Keep CSS code separated from html, your code will be easy to modify and reusable.

I suggest you to read something about the concept of CSS specificity and after that you will never use inline styles again.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54