Solved

CSS Vertical scroll bar, on load=bottom

Posted on 2009-07-01
1
620 Views
Last Modified: 2012-05-07
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

0
Comment
Question by:tonelm54
1 Comment
 
LVL 39

Accepted Solution

by:
Roger Baklund earned 500 total points
ID: 24753360
Put some element with id="detailBottom" at the bottom of "divDetail". Then link to the page with something like:

<a href="page.html#detailBottom">Page</a>
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now