0

私は仕切りを持っていて、それを最小の高さ126pxにしたいのですが、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 に答える