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

I'm trying to build tabs using pure HTML and CSS. I've got the tab functionality working, so when you click a tab label the corresponding content shows.

我正在尝试使用纯HTML和CSS构建标签。我有选项卡功能，所以当您单击选项卡标签时，相应的内容会显示。

But in my design I've 2 tab areas, 1 for request and 1 for response. For some reason my request seems to overlap the response area, why is this so?

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

The <hr> tag that separates the 2 areas should always be below the request area's shown content.

分隔2个区域的

---

标记应始终低于请求区域显示的内容。

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

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

Current output (content tab) ..

Current output (header tab) ..

Desired output ..

html ..

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

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

2 个解决方案

#1

Try to add min-height for tabs Demo

尝试为标签Demo添加最小高度

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

#2

I remember a year or 2 back, before I learned JS, when I was heavily invested in creating functioning tabs using only HTML and CSS. They can be done, but at a cost of being unable to use animations on them (you cannot animate from display: none to display: block). Anyway, the issue you are having if because your element with the class "content" has its position set to "absolute". By definition, you are telling this element to not consume space. Remove this, or change the position to "relative", and you should see a more desired behaviour.

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