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

我正在尝试使用纯

HTML

和

CSS

构建选项卡。我已经使用了选项卡功能，因此当您单击选项卡标签时，相应的内容会显示出来

但在我的设计中，我有两个选项卡区域，一个用于请求，一个用于响应。出于某种原因，我的请求似乎与响应区域重叠，为什么会这样

分隔两个区域的

标记应始终位于请求区域显示内容的下方

当前输出（内容选项卡）。。

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

期望输出。。

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>

---

尝试为

选项卡添加
最小高度

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

---

我记得一两年前，在我学习JS之前，我投入巨资只使用HTML和CSS创建功能性选项卡。可以完成这些操作，但代价是无法在其上使用动画（无法从“显示：无”设置动画到“显示：块”）。

---

不管怎么说，您遇到的问题是因为类为“content”的元素的位置设置为“absolute”。根据定义，您告诉此元素不要占用空间。删除此项，或将位置更改为“相对”，您将看到更理想的行为。

唯一的问题是，如果我在请求选项卡内容中添加~10个标题，它们会在响应区域中增长？此代码的结果将是这样的，因为选项卡标签和内容放在一个公共div中，因此，如果使用相对值而不是绝对值，则间距应该存在。。我建议最好尝试其他代码或使用js

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