HTML div 高度自动

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8701021/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:16:52  来源:igfitidea点击:

HTML div height auto

html

提问by Arun

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)

我有一个要求,在 TR 内,我将有三个 TD。第一个 TD 和第三个 TD 应该是可滚动的,第二个 TD 是一个标尺图像,例如划分第一和第三(类似于使用框架)

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

如果没有在第一个 TD 中设置高度,滚动将不起作用并且还会影响第三个 TD 的高度。如何使高度自动。高度应该是窗口的高度(我将最大化和最小化窗口)。已粘贴下面的代码片段

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>

回答by bekay

With a floating div it should be far more easy:

使用浮动 div 应该更容易:

<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>