CODEWITHSUNDEEP
html
Arun
Arun

Reputation: 3680

HTML div height auto

I have an requirement where inside an TR, i will have three TDs . First TD and Third TD should be scrollable and second TD is an ruler Image such as dividing first and third (similar to using frames)

Without setting height in first TD the scroll is not working and also affecting the height of third TD. How to make the height auto. Height should be that of window's height (I will maximise and minimize the window). Have pasted the code-snippet below

In the below mode, i have mentioned specifically the height, I dont want to do that way. I want it to get set automatically but with same result

<td width="55%">                            
    <div style="height:350px;overflow:auto">
        <table cellspacing="0" cellpadding="0" border="0">
            <tr>
                <td>
                    <%=passageText%>
                </td>
            </tr>
        </table>
    </div>
</td>
<td>
    <img src="/Images/reads/rulerVertical.gif" width="3" height="400"  border="0"/>
</td>
<td>
    HERE I WILL PLACE THE STUFFS OF THIRD TD
</td>

Upvotes: 0

Views: 21776

Answers (1)

bekay
bekay

Reputation: 1830

With a floating div it should be far more easy:

<html>
<head>

<style type="text/css">
<!--
body {
  margin:0;
  padding:0; 
  height:100%
}
#div1 {
  height:100%;
  width:50%;
  overflow:auto;
  display:inline-block;
  float:left;
  background:#6666CC;  
}
#div2 {
  height:100%;
  width:45%;
  overflow:auto;
  display:inline-block;
  background:#6666CC;
  margin-left:5%;
}
-->
</style>

</head>
<body>

<div id="div1">
</div>

<div id="div2">
</div>

</body>

Upvotes: 2

Related Questions