Solved

td with div scroll with height 100%

Posted on 2004-09-23
5
34,028 Views
Last Modified: 2011-08-18
I know this problem had been spoken before but the solution didn't help me.
My problem: I have a td with sometimes a lot of text but this td may only take the entire screen. If the text is longer than the entire screen, the td needs a scroll bar, but only the td, not whole the page. I hope I'm being clear.

The solution I have read on this forum:
in your stylesheet:
#scroll {height:100%;
overflow:auto;}

and in your document:
<div id="scroll">here text</div>

But this doesn't helps.

thanks in advance for any help
0
Comment
Question by:pebbleeee
5 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 43 total points
ID: 12131524
Have you assigned the height/width for your enclosing elements?

<body style="height:100%;width:100%;">
  <div style="height:100%;overflow:auto;">Multiple lines</div>
</body>

-r-
0
 
LVL 33

Assisted Solution

by:sajuks
sajuks earned 41 total points
ID: 12131534
/ /a code which i'd picked from this forum
<TABLE BORDER=1 HEIGHT=100><TR><TD>No Scroll.</TD><TD>No Scroll.</TD><TD WIDTH=80>
<DIV STYLE="overflow:scroll;width:100%;height:100%">This can scroll!<P>See?<P>There is more text here.</DIV>
</TD></TR>
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 41 total points
ID: 12133692
To get scrolling in a cell you have to fix the format of the table and give the div in cell an explicit height.  Height 100% will not work for many browsers so you have to set the height dynamically at load time.  The initial shor height is required to prevent the table from oversizing before the calculation and messing things up.  You need to use the strict doctype.

Cd&

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head><title>none</title>
<style type="text/css">
#thetable {border:1px solid blue;width:100%; table-layout:fixed; }
#thecell {overflow:auto;clip:auto;border:1px solid black; width:100%;height:60px }
</style>
<script type="text/javascript">
<!--
   function setH()
   {
      if (document.documentElement && document.documentElement.clientHeight)
         H=document.documentElement.clientHeight;
      else
         H=document.body.clientHeight;
      obj=document.getElementById('thetable')
      tabH=Math.max(obj.offsetHeight,H)-obj.offsetTop-15;
      document.getElementById('thecell').style.height=tabH+'px';
   }
onload=setH;
onresize=setH;
//-->
</script>
</head>
<body>
<table id="thetable">
<tr>
    <td> DATA </td>
    <td>
    <div id="thecell">
    Lorem ipsum dolor sit amet, lacus nonummy tempus, dui nascetur. Sociosqu luctus habitasse. Tempus dictumst curabitur sit id malesuada ipsum, at facilisi dignissim. Hendrerit potenti. Convallis nam. Cursus inceptos risus pretium nec aliquam nascetur. Ultricies vivamus eros congue conubia bibendum magnis nullam malesuada nam ultrices placerat iaculis.
Blandit eu nunc egestas sociosqu cubilia sagittis a mollis nascetur. Nisl euismod curae vivamus. Eleifend fermentum erat. Tempus semper hymenaeos scelerisque massa, purus cursus mus sociis libero. Eu fermentum sodales. Integer ac vestibulum wisi facilisis consequat, vitae mattis enim donec. Molestie orci.
A dictumst sollicitudin quam habitasse integer netus scelerisque neque orci. Luctus hendrerit quam tempus iaculis praesent tempor per, sociosqu sollicitudin dictum bibendum. Nisl neque ornare viverra ultricies parturient cursus rhoncus inceptos mauris cursus vivamus faucibus. In orci class quis. Conubia condimentum sollicitudin scelerisque varius platea vivamus adipiscing, purus viverra. Nullam nisl elit est quis. Et, diam orci neque ultrices erat.
Habitant pretium. Suscipit ante. Volutpat suscipit odio. Nostra nunc ultrices eleifend egestas cursus. Diam cursus enim habitasse sed, sociis et. Sit interdum mi ridiculus pretium id, senectus tincidunt aenean sem pulvinar pellentesque. Et libero.    
</div>
</td>
    <td > DATA </td>
</tr>
</table>
</body>
</html>
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

Suggested Solutions

Title # Comments Views Activity
Simple Angular 2 login page 4 82
Issue in webpage 6 34
Centering Vertically 3 28
Change text to radio button and calendar form 2 36
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

896 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

13 Experts available now in Live!

Get 1:1 Help Now