Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

make div height behave like <table height=100%>

Status
Not open for further replies.
lumberjakel

lumberjakel

Programmer
Oct 27, 2001
29
NL
I have somewhat like the following page:
Code: 
<table height=100%><tr><th>title</th></tr>
<tr><td>
<div style='overflow:auto; ...'>
PAGECONTENTS
</div>
</td>
</tr>
<tr valign=bottom><td>some copyright info here</td></tr>
</table>

What i want is that if PAGECONTENT gets too large, the div-layer scrollbar is uses instead of the browsers scrollbarr.
Obviously i tried <div style='height:100%'> but this isn't working at all.
Basicly what i want is the divs height as high as possible without exceeding the pagewidth. Tables with 100% are able do to just this, so i think a layer should be able to do this as well
 
Sort by date Sort by votes
add an id tag to ur div:
<div style='overflow:auto; ...' id="TheDiv">
PAGECONTENTS
</div>


after </html> add this code
<script>
document.getElementBydId("TheDiv").offsetWidth=document.body.clientWidth
</script>


Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
oops:
>>offsetWidth - is for width.
offsetHeight - is for height.
clientHeight - document's height

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
ok, i had somewhat like this, only after consulting some books and snippets form others:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function contentscrollsize (content, measure) {
  document.getElementById(content).style.display='none';
  document.getElementById content).style.height=document.getElementById(measure).scrollHeight; document.getElementById(content).style.display='';
}
//-->
</script>
</head>

<body onResize="contentscrollsize ('content', 'measure')" onLoad="contentscrollsize ('content', 'measure');"> <table width=700; height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td valign="top">title</td>
  </tr>
  <tr><td height='100%' id='measure'>
  <table height='100%' cellpadding="0" cellspacing="0"><tr><td height='100%'> <div id='content' style="overflow:auto; display:none; width: 695px;"> lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br> lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br>lala<br> </div>
  </td></tr></table>
  </td>
  </tr>
  <tr>
    <td valign="bottom">copyright</td>
  </tr>
</table>
</body>

</html>

Basicly what i did was creating some table structure which was what i wanted. Then i added a div-layer with display:none. After that it was easy to copy scrollHeight to the height of de div-layer. Then autoscrolling does the trick, then setting the display to '' to restore default (this was the only thing which cross-browsered. OnResize the function is run again, so i had do set display to none before sniffing the table's height.

Anyways i think it's better to NOT initialy set display to none. This is done anyway. It keeps the HTML code somewhat easier.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
504
spamjim
spamjim
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
323
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
107
jason.lex
jason.lex
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
71
CoolBreeze007
CoolBreeze007
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
100
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top