Question

我需要我的div在它的父级上有100％的高度和宽度，但由于某种原因它不会。 Here is a link 到我的网站，以便您可以看到问题。

显然，我希望tab-content div填充文章容器的其余部分，此时它的宽度约为80％，高度约为其高度的20％。

以下是代码：

<article id="contactus" class="container box style3">
    <header>
        <h2>Contact Us/Receive Quote</h2>
        <p>Please use the below form to contact us, please note, some inputs will be disabled based upon what you have selected your submitting</p>
    </header>
    <form method="post" action="#" id="frmSendmessage">
        <ul class="tabs">
            <li>
                <input type="radio" name="tabs" id="tab1" checked />
                <label for="tab1">Message/Quote</label>
                <div id="tab-content1" class="tab-content">
                    <p>This is box 1</p>
                </div>
            </li>
            <li>
                <input type="radio" name="tabs" id="tab2" />
                <label for="tab2">Submit Review</label>
                <div id="tab-content2" class="tab-content">
                    <p>This is box 2</p>
                </div>
            </li>
        </ul>
    </form>
</article>

这是上面HTML的CSS，它至少应该是全部。

.container {
    width:960px;
    margin-left:auto;
    margin-right:auto;
    /*border-radius:3em;*/
}
.box.style3 {
    background:#FFF;
    padding:3em;
    min-height:400px;
}
.box.style3 header {
    text-align:center;
}
header { margin-bottom: 1em; }
header p { margin-top:0.5em; }
div { display:block; }
form { display:block; margin-top:0em; }
/* Tab CSS */
.tabs {
    width:650px;
    float:none;
    list-style:none;
    position:relative;
    margin:0px 0px 0px 10px;
    text-align:left;
}
.tabs li {
    float:left;
    display:block;
}
.tabs input[type="radio"] {
    display:none;
}
.tabs label {
    display:block;
    padding:14px 21px;
    border-radius:2px 2px 0px 0px;
    font-size:20px;
    font-weight:normal;
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
    top:4px;
    background-color:#e9e9e9;
    margin:0 10px;
}
.tab-content {
    z-index:2;
    display:none;
    overflow:hidden;
    width:100%;
    height:100%;
    font-size:17px;
    line-height:25px;
    padding:25px;
    position:absolute;
    top:53px;
    left:0px;
    background-color:#e9e9e9;
}
[id^="tab"]:checked + label {
    top:0;
    padding-top:17px;
    background-color:#35b88f;
    color:#FFF;
}
[id^="tab"]:checked ~ [id^="tab-content"] {
    display: block;
    background-color:#35b88f;
    color:#FFF;
}
/* Tab CSS END /*

Answer 1

我看到的唯一可能是添加.tab-content { min-height: 200px } 但是因为你也有一个固定的高度来联系我们，所以这应该不是什么大问题。

div不扩展到父母的宽度+高度

1 个答案: