随着内部 div 变大，动态改变外部 div答案

【问题标题】：Dynamically alter outter div as inner one gets bigger随着内部 div 变大，动态改变外部 div
【发布时间】：2010-05-10 05:17:34
【问题描述】：

我有两个 div，一个在另一个里面。外层称为#wrapper，而内层称为#pad。

现在#pad 允许用户输入，我有一个javascript (jQuery) 函数，它可以根据用户输入的内容更改#pad 的内容。有时，因为这个功能，#pad 的内容会导致 div 变得比以前更细长。现在显然我希望#wrapper 也能长得更长，以适应#pad 长度的这种变化。但是，这不会发生。

#wrapper
{
    clear:both;
    padding-top:0.5em;
    /*padding-left:50px;*/
    height: 100%;
    background-color: rgba(255,255,255,0.4);
    -moz-border-radius: 20px 20px 0px 0px;
    -webkit-border-radius: 20px 20px 0px 0px;
    border-radius: 20px 20px 0px 0px;
}

#pad
{
    margin-top: 25px;
    -moz-border-radius: 5px;
    border: solid 1px #DDD;
    margin-left:25px;
    padding-left:25px;
    margin-right:25px;
    padding-right:25px;
    margin-bottom:2em;
}

这是javascript函数：

function preview()
{
    var id1=$("#input1").val();
    var id2=$("#input2").val();
    var id3=$("#input3").val();
    var id4=$("#input4").val();
    var id5=$("#input5").val();

    if(id1!= null && id1!="")
    {
        if( $("#preview1").attr("src")!=id1)
        {
            $("#preview1").attr("src",id1);
            $("#preview1").fadeIn("slow");
        }
    }
    else
    {
        $("#preview1").attr("src","");
        $("#preview1").fadeOut("slow");
    }

    if(id2!= null && id2!="")
    {
        if( $("#preview2").attr("src")!=id2)
        {
            $("#preview2").attr("src",id2);
            $("#preview2").fadeIn("slow");
        }
    }
    else
    {
        $("#preview2").attr("src","");
        $("#preview2").fadeOut("slow");
    }

    if(id3!= null && id3!="")
    {
        if( $("#preview3").attr("src")!=id3)
        {
            $("#preview3").attr("src",id3);
            $("#preview3").fadeIn("slow");
        }
    }
    else
    {
        $("#preview3").attr("src","");
        $("#preview3").fadeOut("slow");
    }
    if(id4!= null && id4!="")
    {
        if( $("#preview4").attr("src")!=id4)
        {
            $("#preview4").attr("src",id4);
            $("#preview4").fadeIn("slow");
        }
    }
    else
    {
        $("#preview4").attr("src","");
        $("#preview4").fadeOut("slow");
    }
    if(id5!= null && id5!="")
    {
        if( $("#preview5").attr("src")!=id5)
        {
            $("#preview5").attr("src",id5);
            $("#preview5").fadeIn("slow");
        }
    }
    else
    {
        $("#preview5").attr("src","");
        $("#preview5").fadeOut("slow");
    }
    setTimeout("preview()",1000);
    $("#wrapper").attr("height",$(document).attr("height"));
}

http://surveys.mylifeisberkeley.com/

【问题讨论】：

标签： javascript jquery css html

【解决方案1】：

据我所知，去掉#wrapper height:100%，调整边距和内边距以使其适合，它应该可以工作。我想问题主要是你混淆了元素属性高度和 CSS 属性高度。在任何情况下，所有这些都应该可以简单地使用普通的 HTML 流而不是手动更改高度来完成。

顺便说一句，“更拉长”是一个很奇怪的措辞，我猜你的意思是“更高”。

【讨论】：

拉长是指更长。但无论如何，我尝试了你所说的，它奏效了！谢谢。 =]
在 HTML 页面上没有定义长度方向，因此没有简单的方法来判断长度是指高度还是宽度。
哦，对了，这就是你的意思。那么我的意思是垂直更长。（我不想说更高，因为更高含糊地暗示了位置或维度）。