...

View Full Version : div vertical scroll



mejl
11-09-2011, 09:14 PM
Hello,

First, sorry on my bad english language but i hope you understand.

Can i make DIV which in the beginnin doesn't have scroll and after content outgrow DIV then only vertical scrollbar appear?
I need this to work on FF (all versions) and IE (6, 7, 8...)

Can i do this with CSS or is better to write javascript whitch will do this.

Structure of my div is:
<div> // this is main DIV which i wanna to have only vertical scrollbar
<div>this is row 1</div> // this DIV is sam width like main DIV
<div>this is row 2</div>
<div>this is row 3</div>
</div>


Example:
<html>
<head>
<title>test</title>
</head>

<body>
<div style="
text-align:left;
background-color: #99CCFF;
overflow:-moz-scrollbars-vertical!important;!overflow:auto;
width:256px;
height:128px;
">
<div style="width:256px;background-color: #339999;"> 1. row</div>
<div style="width:256px;background-color: #339999;"> 2. row</div>
</div>
<br><br>
<div style="
text-align:left;
background-color: #99CCFF;
overflow:-moz-scrollbars-vertical!important;!overflow:auto;
width:256px;
height:128px;
">
<div style="width:256px;background-color: #339999;"> 1. row</div>
<div style="width:256px;background-color: #339999;"> 2. row</div>
<div style="width:256px;background-color: #339999;"> 3. row</div>
<div style="width:256px;background-color: #339999;"> 4. row</div>
<div style="width:256px;background-color: #339999;"> 5. row</div>
<div style="width:256px;background-color: #339999;"> 6. row</div>
<div style="width:256px;background-color: #339999;"> 7. row</div>
<div style="width:256px;background-color: #339999;"> 8. row
</div>

</body>
<html>



The behavior of the FF:
- If it has less content than the size of a main DIV then a vertical scrollbar is visible but i don't wanna that (can i turn it off?)
- If there is more content than the size of main DIV then it show only vertical scrolling which is ok (This is a situation that i want)


Behavior in IE8:
- If it has less content than the size of a main DIV then does not show a vertical scrollbar which is ok
- If there is more content than the size of main DIV then i see a vertical scrollbar whitch is ok, but the problem is that it appears and horizontal scrollbar; the horizontal scroll appears because I use the DIV in the main DIV of the same width as the main div; so when the vertical scroll seize part of the main DIV these DIV no longer fit and creates a horizontal scrollbar; can i turn it off horizontal DIV?

Thanks,

teedoff
11-09-2011, 09:19 PM
Hi mejl, if you set a height on a div and then add overflow: scroll; to that divs style rule, it should give you a scroll bar once your height is exceeded.


edit: ok I should read the entire post before commenting...lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum