如何强制DIV占用父级的高度

Question

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

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

输出：

我希望绿色DIV获得50％的高度并将文本对齐，但似乎无法完成。

请帮我解决。

Answer 1

父元素应定义为position: absolute;，因此子元素的宽度和高度取决于