选项卡内容不占用空间，因此稍后定义的html标签实际上不会在选项卡内容之后呈现

Question

我正在尝试使用纯HTML和CSS构建标签页。我已经使用了标签功能，因此当您单击标签标签时，相应的内容会显示。

但在我的设计中，我有2个标签区域，1个用于请求，1个用于响应。出于某种原因，我的请求似乎与响应区域重叠，为什么会这样呢？

分隔2个区域的<hr>标记应始终低于请求区域显示的内容。

http://jsfiddle.net/bobbyrne01/pgzt6nbf/

当前输出（内容标签）..

当前输出（标题选项卡）..

期望的输出..

html ..

<div id="main">
    <div class="left w60">
        <div class="center">
                <h2>Request</h2>

        </div>
        <div>
            <div>
                <input id="url" placeholder="Request URL .." class="w100" />
            </div>
            <br/>
            <div>
                <select id="method">
                    <option value="0">GET</option>
                    <option value="1">HEAD</option>
                </select>
                <button type="button" id="submit">Submit</button>
            </div>
            <br/>
            <div class="tabs">
                <div class="tab">
                    <input type="radio" id="tab-1a" name="tab-group-1" hidden checked />
                    <label class="tabLabel" for="tab-1a">Headers</label>
                    <div class="content">
                        <div id="headersRequest">
                            <table id="headersRequestTable" class="w100">
                                <tr>
                                    <th>Name</th>
                                    <th>Value</th>
                                    <th>
                                        <input type="button" id="newHeaderButton" value="+" />
                                    </th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab">
                    <input type="radio" id="tab-2a" name="tab-group-1" hidden checked />
                    <label class="tabLabel" for="tab-2a">Body content</label>
                    <div class="content">
                        <div id="bodyRequest">
                            <textarea id="bodyRequestListItem" rows="10" class="w100"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="center">
                <h2>Response</h2>

        </div>
        <div class="tabs">
            <div class="tab">
                <input type="radio" id="tab-1b" name="tab-group-2" hidden checked />
                <label class="tabLabel" for="tab-1b">Headers</label>
                <div class="content">
                    <div id="headers"></div>
                </div>
            </div>
            <div class="tab">
                <input type="radio" id="tab-2b" name="tab-group-2" hidden checked />
                <label class="tabLabel" for="tab-2b">Body content</label>
                <div class="content">
                    <button id="clipboard" style="display: none;">Copy to clipboard</button>
                    <br/>
                    <div id="bodyContent"></div>
                </div>
            </div>
            <div class="tab">
                <input type="radio" id="tab-3b" name="tab-group-2" hidden checked />
                <label class="tabLabel" for="tab-3b" id="statusListItem">Status</label>
                <div class="content">
                    <div id="status"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="right w30">
        <div class="center">
                <h2>History</h2>

            <table id="historyContainer"></table>
        </div>
    </div>
</div>

css ..

.left {
    float: left;
}
.right {
    float: right;
}
.center {
    text-align: center;
}
.w30 {
    width: 30%;
}
.w40 {
    width: 40%;
}
.w50 {
    width: 50%;
}
.w60 {
    width: 60%;
}
.w100 {
    width: 100%;
}
.bCollapse {
    border-collapse: collapse;
}
/*
 * Tabs
 */
 .tabs {
    position: relative;
    height: 100%;
    clear: both;
    margin: 35px 0 25px;
}
.tab {
    float: left;
}
.tabLabel {
    background: #eee;
    padding: 10px;
    border: 1px solid #ccc;
    margin-left: -1px;
    position: relative;
    left: 1px;
    top: -20px;
}
.content {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    opacity: 0;
}
[type=radio]:checked ~ label {
    background: white;
    border-bottom: 1px solid white;
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}

Answer 1

尝试为min-height Demo

添加tabs

 .tabs {
    position: relative;
    height: 100%;
     min-height: 200px; 
    clear: both;
    margin: 35px 0 25px;
    display:block;
}

Answer 2

我记得在我学习JS之前的一年或两年，当我大量投入使用HTML和CSS创建功能标签时。它们可以完成，但代价是无法在它们上使用动画（你无法通过display：none来显示：block）。 无论如何，如果因为具有“content”类的元素将其位置设置为“absolute”，则会遇到此问题。根据定义，您告诉此元素不占用空间。删除它，或将位置更改为“relative”，您应该看到更理想的行为。