Question

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #t2
        {
            width: 87px;
            top: 49px;
            left: -566px;
        }
        #t1
        {
            width: 87px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 171px; width: 391px">
    <div id="Div2" style="position:absolute; top: 65px; left: 14px;">

        sdsdf<br />
        asfaesrestret<br />
        asf<br />
        asdfas<br />
        asdfaasdfasfsad<br />
        hhb<br />
        jh</div>
    <div id="t1" style="position:absolute; top: 65px; left: 111px;">
        yyyyyyyyyyyyy
    </div>
    <div id="Div1" 
        style="position: absolute; width: 87px;position:absolute; top: 168px; left: 12px;">
    xxxxxxxxxxxxxxx
    </div>
    </div>
   </form>
</body>
</html>

嗨，我是css的新手，请帮我解决如何在Div2中提供更多数据时动态增加高度？主div的高度也需要增加。我已将位置设置为绝对值，我不确定是否会根据Div2上的数据增加来移动div。请建议??提前谢谢。

-Srini

Answer 1

我建议你为你的两个div使用div包装器，并使用百分比代替高度的固定值。

编辑：

然后执行以下操作：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
        #t2
        {
            width: 87px;
            top: 49px;
            left: -566px;
        }
        #t1
        {
            width: 87px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 171px; width: 391px">
      <div id="wrapper" style="position:absolute;">
        <div id="Div2" style="top: 65px; left: 14px; background: red;">

          sdsdf<br />
          asfaesrestret<br />
          asf<br />
          asdfas<br />
          asdfaasdfasfsad<br />
          hhb<br />
          jh</div>
        <div id="t1" style="position:absolute; top: 65px; left: 111px;">
          yyyyyyyyyyyyy
        </div>
        <div id="Div1" 
             style="width: 87px;position:relative; top: 0px; left: 12px; background: green;">
          xxxxxxxxxxxxxxx
        </div>
      </div>
    </div>
   </form>
</body>
</html>

我将背景颜色设置为div，这样你就会明白我的意思。基本上，我添加了一个绝对位置的包装div。 Div1和Div2现在是相对的。 Div1有一个top：0属性，不与Div2留下任何空隙。

Answer 2

您可以使用JavaScript动态更改Element属性。例如

document.getElementById("Div1").style.width= "900";

Answer 3

Works crossbrowser将100替换为您想要的默认高度

min-height: 100px; height: auto !important; height: 100px;

如何在第1分区给出更多数据时动态增加第2 div的高度

3 个答案: