2014-11-24 57 views
0
<div class="dispLoginSearch"> <!-- LOGIN AND SEARCH --> 
    <div class="loginBox"> 
     <div class="loginTopHolder hidOverflow"> 
      <div class="floatLeft setCenter hidOverflow" style="width: 45%;"> 
       <span class="myText">My</span> 
       <br /><br /> 
       <span class="wmText">Login</span> 
      </div> 
      <div class="floatRight hidOverflow" style="height: 100%; background: #FF0000;"> 
       <div class="hidOverflow brClear" style="height: 50%; background: #0000FF;"> 
        <input type="submit" name="ctl00$SubmitLoginNM" value="Login" id="ctl00_SubmitLoginNM" class="styledBtn logBtn floatLeft lightLinks" /> 
       </div> 
       <div class="hidOverflow brClear" style="height: 50%; font-size: small; display: table-cell; vertical-align: bottom;"> 
        Register a New Account 
        <br /> 
        Forgot Username/Password 
       </div> 
      </div> 
     </div> 
    </div> 
</div> <!-- LOGIN AND SEARCH --> 

CSS:如何强制DIV占用父的高度

CSS:

.dispLoginSearch { 
    width: 40%; 
    height: 100%; 
    vertical-align: middle; 
    float: right; 
    padding-right: 2%; 
    background: #FFFFFF; 
    overflow: hidden; 
    text-align: center; 
    margin: 0 auto; 
} 
.loginBox { 
    margin-top: 3%; 
    border: 1px solid #d4d4d4; 
    display: block; 
    width: 95%; 
    font: 16px sans-serif; 
    padding: 0 0 0 15px; 
    border-radius: 5px; 
    -webkit-font-smoothing: antialiased; 
    text-align: left; 
    overflow: auto; 
} 
.loginTopHolder { 
    width: 95%; 
    margin: 5px 5px 5px 5px; 
    height: 85px; 
} 
.hidOverflow { 
    overflow: hidden; 
} 
.setCenter { 
    text-align: center; 
} 
.brClear { 
    clear: both; 
} 
.floatLeft { 
    float: left; 
} 
.floatRight { 
    float: right; 
} 

输出:

enter image description here

我想绿色DIV来获得高度的50%并对齐文本底部,但似乎无法完成。

请帮我解决它。

+1

请提供您的相关CSS样式,理想情况下,包括小提琴例子。 – 2014-11-24 16:16:28

回答

3

父元素应该定义为position: absolute;这样子元素的宽度和高度取决于

相关问题