Question

我有一个分频器，我希望它的最小高度为126px但是当我用javascript制作内容时，我希望它随着内容扩展...（因为我有一个围绕父div的寄宿生我实际上需要它来改变大小而不仅仅是显示内部内容）

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

我添加了最小高度：126px; 对于div的风格

然而，当我添加新元素时，我的大小相同，滚动条出现在侧面而不是实际增加的元素，就像我想要的那样

这是我的css（s乱用于我将会制作课程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在body标签内：

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

上设置最小宽度或高度

min-width:126px;

Answer 3

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

随着内容的增加，这会扩大。基于父母 - 不是吗？

让孩子决定父Div的大小

3 个答案: