讓孩子決定父母的大小Div

Question

我有一個分隔線，我希望它的最小高度爲126px，但是當我用javascript使內容出現時，我希望它能隨內容擴展......（因爲我有圍繞父div的寄宿生我實際上需要它來改變大小不僅僅顯示裏面的內容）

這應該是很容易，但我不能得到它的工作 任何建議？

我加了min-height：126px; 到

但是div的風格，當我添加新的元素我有它具有相同的大小和滾動條出現在兩側，而不是在大小實際上增加元素像我想它也

這裏是我的CSS（SRY的混亂，我將讓班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; 
} 

而我的身體標記中的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

編輯：

所以看來你正在使用很多absolute定位，這應該避免。

你應該調整你的代碼一起的臺詞：

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> 

Answer 2

<div style='min-width:100px; width:100px;'> 
    <!-- the content --> 
</div> 

隨着內容的添加，這將會擴大。基於父母 - 不是？

Answer 3

設置父的最小寬度或高度<div>

min-width:126px;