0

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

这应该很容易，但我无法得到任何建议？

我添加了 min-height: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的显示样式从隐藏更改为内联。

4

3 回答 3

2

像这样的东西应该工作：

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>
于 2012-05-02T00:42:07.777 回答
1

在父级上设置最小宽度或高度<div> 

min-width:126px;
于 2012-05-02T00:40:40.343 回答
0 
<div style='min-width:100px; width:100px;'>
     <!-- the content -->
</div>

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

于 2012-05-02T00:39:55.167 回答