asked on

CSS Vertical scroll bar, on load=bottom

Good afternoon,
Ive written a simple CSS layout to try out an idea, which all seems to work, apart from I need the div divDetail to scroll to the last line.

Ive got a feeling I need to use javascript, but have no idea even where to start. I have searched google, but without completly re-writing the scroll bar component (which I dont reall want to do), I cannot see a way to solve this problem.

Any ideas?

CSS:-
	body{		
		margin: 0;
		background-color:#FFFFFF;
		color: #666666;
		FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif;
		text-align: center;
		}
 
		
	#divContent
		{
		width: 980px; /*Width of main container*/
		height: 580px;
		border:1px solid #FF0000;
		}
	#divTitle
		{
		width: 970px; /*Width of main container*/
		height: 150px;
		border:1px solid #FF0000;
		}
	#divMenu
		{
		width: 970px; /*Width of main container*/
		height: 30x;
		border:1px solid #FF0000;
		}
	#divBody
		{
		width: 970px; /*Width of main container*/
		height: 100px;
		border:1px solid #FF0000;
		}
	#divDetailTitle
		{
		width: 970px; /*Width of main container*/
		height: 30px;
		border:1px solid #FF0000;	
		}
	#divDetail
		{
		overflow-y:auto;
		width: 970px; /*Width of main container*/
		height: 100px;
		border:1px solid #FF0000;
		}
	#divDetailMenu
		{
		width: 965px; /*Width of main container*/
		height: 30px;
		border:1px solid #FF0000;
		}
	#divDetailActions
		{
		width: 965px; /*Width of main container*/
		height: 90px;
		border:1px solid #FF0000;
		}
 
 
HTML:-
	<HTML>
	<HEAD>
	<title>CSS Test</title>
	<link href="cssStyle.css" rel="stylesheet" type="text/css" />
	</HEAD>
	<BODY>
	<div id="divContent">
		<div id="divTitle">Title</div>
		<div id="divMenu">Menu</div>
		<div id="divBody">
			<div id="divDetailTitle">Detail title</div>
			<div id="divDetail">Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail<BR>Detail</div>
			<div id="divDetailMenu">Menu</div>
			<div id="divDetailActions">Actions</div>
		</div>
	</div>
	</BODY>
	</HTML>

Open in new window

ASKER CERTIFIED SOLUTION

Roger Baklund

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial