html - 让 Children 决定父 Div 的大小

Question

我有一个分隔线，我希望它的最小高度为 126 像素，但是当我使用 javascript 使内容出现在其中时，我希望它随着内容扩展......(因为我在父 div 周围有一个边界，我实际上需要它改变大小而不仅仅是显示内部内容)

这应该很简单，但我无法让它工作 有什么建议 ？？

我添加了最小高度:126px； 到div的样式

然而，当我添加新元素时，我让它的大小相同，并且滚动条出现在两侧，而不是元素实际增加的大小，就像我也希望的那样

这是我的 css(很抱歉我会把类弄成 l8ter):

#login {
    position:absolute;
    left:661px;
    top:130px;
    width:162px;
    min-height:126px;
    border: 1px solid black;

}

 #username {
    position:absolute;
    left:9px;
    top:5px;
    width:144px;
    height:17px;
    font-family: "Times New Roman", Times, serif;
}

#usernameInput {
    position:absolute;
    left:9px;
    top:23px;
    width:101px;
    height:17px;
}
#password {
    position:absolute;
    left:10px;
    top:40px;
    width:101px;
    height:17px;
    font-family: "Times New Roman", Times, serif;
}
#passwordInput {
    position:absolute;
    left:9px;
    top:59px;
    width:101px;
    height:17px;
}
#signUp {
    position:absolute;
    left:741px;
    top:108px;
    width:83px;
    height:14px;
}
#loginBttn {
    position:relative;
    left:71px;

    width:37px;
    height:16px;
    background-color: #000000;
    color: #FFF;
    font-size: 11px;
    text-align: center;
    font-family: Tahoma, Geneva, sans-serif;
    cursor:pointer;
    font-weight: bold;
}
#CreateAcc {
    position:relative;
    left:12px;
    width:119px;
    height:18px;
    z-index:1;
}
#createAccText {
    position:absolute; /*fix positioning so it looks good in browsers probably use float or something similar */
    left:20px;
    top:4px;
    width:88px;
    height:11px;
    z-index:2;
    font-size: 9px;
    font-family: "MS Serif", "New York", serif;
}

#optional {
    position:absolute;
    left:75px;
    top:8px;
    width:70px;
    height:14px;
    z-index:1;
    font-size: 11px;
    color: #999;
    display: none;  
}
#relativeHolder {
    position:absolute;
    left:0px;
    top:77px;
    width:162px;
    height:auto;
    z-index:1;
}
#email {
    position:relative;
    left:12px;
    top:-2px;
    width:101px;
    height:17px;
    font-family: "Times New Roman", Times, serif;
    display:none;

}
#emailIn {
    position:relative;
    left:10px;
    width:101px;
    height:17px;
    font-family: "Times New Roman", Times, serif;
    display:none;
}

还有我在 body 标签内的 html:

<div id="login">

<div id="username">Username</div> <div id="optional">(Optional)</div>
<form name="loginForm">
<div id="usernameInput">
<input name="username" type="text" size="20" value="">
</div>
<div id="password">Password</div>
<div id="passwordInput">
<input name="password" type="password" size="20" value="">
</div>
<div id="relativeHolder"> 

<div id="email">Email</div>
<div id="emailIn"><input name="email" type="text" size="20" value=""></div>


<div id="CreateAcc"> 
 <input name='newAcc' type='checkbox' value='newAcc' onClick='signUp()'  >
<div id="createAccText">Create new Account</div>
</div>

<div id="loginBttn" onclick="login()">Login</div>
</div>
</form>

</div>

<div id="signUp" ></div>

JavaScript:

js没有问题，所以我认为我不需要在这里发布它 它所做的只是将 emailIn div 的显示样式从隐藏更改为内联。

Answer 1

像这样的东西应该可以工作:

http://jsfiddle.net/cvtfS/1/

它使用min-width 和min-height

编辑:

看来您使用了很多绝对定位，应该避免。

您应该按照以下方式重构您的代码:

http://jsfiddle.net/PzF4Z/

<form id="login">
    <label>Username</label>
    <input type="text"  />
    <label>Password</label>
    <input type="password" />
    <div>
        <input type="checkbox" />
        <label>Create new Account</label>
    </div>
    <button>Login</button>
</form>