Question

我有分歧,希望它达到126px的最低高点,但当我用javascript在它中看到内容时,它想要扩大内容。 (由于在母体周围有一排板,实际上需要改变规模,而不仅仅是显示内部内容)

this should be pretty easy but i cant get it to work any suggestions ??

I added min-height:126px; to the style of the div

however when i add new elements i have it being the same size and scroll-bars appear on the sides rather than the element actually increasing in size like i would want it too

这里是我的剪辑(为餐厅打工,一间将打上8升):

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

there is nothing wrong with the js so i dont think i need to post it here all it does is it changes the display style of emailIn div to inline from hidden.

Answer 1

与此类似:

http://jsfiddle.net/cvtfS/1/"rel=“nofollow> http://jsfiddle.net/cvtfS/1/。

It uses min-width and 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>

Answer 2

在母体上设定最小的宽度或高度<div>

min-width:126px;

Answer 3

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

随着内容的增加,这将扩大。根据母体—— no子?

友情链接