CODEWITHSUNDEEP
css
Pete Kozak
Pete Kozak

Reputation: 623

CSS, overflow auto, scrolling a DIV instead of whole page

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.

Upvotes: 5

Views: 18698

Answers (3)

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7246

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/

Upvotes: 0

JRulle
JRulle

Reputation: 7568

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

Upvotes: 8

zgood
zgood

Reputation: 12571

You must give a height to your #bot div

Upvotes: 3

Related Questions