You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让下拉按钮内容超出容器且不推挤下方灰色内容区？

avatar
开发者阿泽
2026-8-20
解决下拉菜单撑开容器并推挤内容的问题

问题原因

你的下拉菜单出现布局异常的核心原因：

  • .dropdown-content 同时设置了 position: absolute 和 position: relative，定位规则冲突，导致下拉内容无法脱离文档流
  • 父容器 .tab 设置了 overflow: hidden，会裁剪超出容器的下拉内容
  • 下拉内容的默认定位未与按钮对齐，引发布局混乱

解决方案

只需要修改以下几处CSS和少量HTML结构：

  1. 修复下拉内容的定位
    修正.dropdown-content的样式，移除重复的position: relative，明确设置脱离文档流的绝对定位：

    .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 999; /* 确保下拉在最上层 */
  top: 100%; /* 紧贴按钮底部 */
  left: 0;
  margin: 0;
}

  2. 移除容器的溢出裁剪
    删掉.tab中的overflow: hidden，让下拉内容可以超出容器：

    .tab {
  /* overflow: hidden; 移除这行 */
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-right: 4px;
}

  3. 优化下拉容器的布局
    给.dropdown添加float: left，让它和其他tab按钮保持同一行对齐：

    .dropdown {
  position: relative;
  display: inline-block;
  float: left; /* 添加这行 */
}

  4. 清理冗余HTML结构
    删掉.dropdown-content中的<p>标签，避免多余间距影响下拉菜单的紧凑性：

    <div id="myDropdown" class="dropdown-content">
  <button class="dropdown-item tablinks" style="background-color: #daeaf6; width: 140px; max-width: 250px" onclick="openTab(event, 'summary_section')">
    summary_section
  </button>
  <button class="dropdown-item tablinks" style="background-color: rgba(255, 10, 10, 0.50); width: 140px; max-width: 250px" onclick="openTab(event, 'failures_section')">
    failures_section
  </button>
</div>

修改后的完整代码 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8, width=device-width, initial-scale=1.0" />
  <title>Test Run Results</title>
  <style>
    @charset "UTF-8";
    .dropbtn {
      background-color: #04AA6D;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
      float: left;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 999;
      top: 100%;
      left: 0;
      margin: 0;
    }
    
    .dropdown-content button {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      width: 100%;
      text-align: left;
      border: none;
      background: transparent;
      cursor: pointer;
    }
    
    .dropdown-content button:hover {
      background-color: #ddd;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    div.sticky {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
    
    pre,
    .pre {
      display: block;
      font-family: monospace;
      white-space: pre;
      margin: 4px 0;
      overflow: auto;
      overflow-wrap: break-word;
      word-break: break-all;
      word-wrap: break-word;
    }
    
    .tab {
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      margin-right: 4px;
    }
    
    .tab button {
      border-radius: 3px;
      background-color: inherit;
      float: left;
      border: 1px solid #ccc;
      border-color: lightgrey;
      border-radius: 2px;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 15px
    }
    
    .tablinks {
      font-family: "Arial", sans-serif;
      font-size: 15px;
      opacity: 0.4;
    }
    
    .tabcontent {
      background-color: #ddd;
      display: none;
      border: 1px solid #ccc;
      border-top: none;
      -webkit-animation: fadeEffect 1s;
      animation: fadeEffect .25s;
    }
    
    .tabcontent button:nth-child(even) {
      background-color: #ddd;
    }
    
    .tabcontent button:nth-child(odd) {
      background-color: #f1f1f1;
    }
    
    .tab button:hover {
      background-color: #ddd;
      opacity: 0.65;
      transition: 0.3s;
    }
    
    .tab button.focus {
      background-color: #ccc;
      opacity: 1.0;
      transition: 0.3s;
    }
    
    .tab button.active {
      opacity: 1.0;
      transition: 0.3s;
    }
    
    @-webkit-keyframes fadeEffect {
      from {
        opacity: 0;
      }
      to {
        opacity: .5;
      }
    }
    
    @keyframes fadeEffect {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    .collapsible {
      font-weight: normal;
      font-family: "Arial", sans-serif;
      background-color: #f1f1f1;
      cursor: pointer;
      width: 100%;
      border: none;
      padding: 4px 4px;
      text-align: left;
      outline: none;
      font-size: 14px;
      white-space: normal;
      box-shadow: 0px 0px 1px 1px #bbb;
    }
    
    .active,
    .collapsible:hover {
      background-color: #ccc;
      transition: 0.35s;
    }
    
    .content {
      display: none;
      overflow: auto;
      -webkit-animation: fadeEffect 1s;
      animation: fadeEffect .25s;
    }
    
    .space {
      width: 4px;
      height: auto;
      display: inline-block;
    }
    
    .line {
      background-color: black;
      height: auto;
      width: 5px;
    }
    
    p {
      font-size: 14px;
      font-family: "Arial", sans-serif;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: "Arial", sans-serif;
    }
    
    .body_foreground {
      color: #000000;
    }
    
    .body_background {
      background-color: #EEEEEE;
    }
  </style>
</head>

<body class="body_foreground body_background" style="font-family: 'Helvetica, Arial, sans-serif';">
  <div class="sticky">
    <div class="tab">
      <button class="tablinks" style="background-color: rgba(0, 0, 255, 0.33)" id="defaultOpen" onclick="openTab(event, 'About')">
          About</button
        ><button
          class="tablinks"
          style="background-color: rgba(255, 10, 10, 0.75)"
          onclick="openTab(event, 'Failures')"
        >
          Failures
        </button>
      <div class="dropdown">
        <button class="dropbtn" style="color: white; background-color: gray">
            Output Sections
          </button>
        <div id="myDropdown" class="dropdown-content">
          <button class="dropdown-item tablinks" style="background-color: #daeaf6; width: 140px; max-width: 250px" onclick="openTab(event, 'summary_section')">
                summary_section
              </button>
          <button class="dropdown-item tablinks" style="background-color: rgba(255, 10, 10, 0.50); width: 140px; max-width: 250px" onclick="openTab(event, 'failures_section')">
                failures_section
              </button>
        </div>
      </div>
      <button class="tablinks" style="background-color: rgba(0, 0, 255, 0.33)" onclick="openTab(event, 'Full Output')">
          Full Output
        </button>
    </div>
  </div>
  <div id="About" class="tabcontent">
    <p></p>
    <hr />
    <h5>Final Results:</h5>
    <pre><b> 1 failed, 62 deselected in 0.96s
</b></pre>
    <hr />
    <h5>Test results generated:</h5>
    <p>2022-09-04 03:11:47</p>
    <h5>This report generated:</h5>
    <p>2022-09-04 03:12:47</p>
    <h5>pytest-tui version:</h5>
    <p>1.3.2</p>
  </div>
  <div id="Failures" class="tabcontent">
    <button type="button" class="collapsible" style="border: none; outline: none;">
        demo-tests/test_0.py::test0_fail_1
      </button>
    <div class="content">
      <pre>
Test Fail 1!

    def test0_fail_1():
        print("Test Fail 1!")
&gt;       assert 1 == 2
E       assert 1 == 2

demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre
        >
      </div>
    </div>
    <div id="summary_section" class="tabcontent">
      <pre>
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================

================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251+gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251+gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected

demo-tests/test_0.py::test0_fail_1 FAILED                                                                                                     [100%]

============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
</pre
      >
    </div>
    <div id="failures_section" class="tabcontent">
      <pre>
===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________

    def test0_fail_1():
        print("Test Fail 1!")
&gt;       assert 1 == 2
E       assert 1 == 2

demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre
      >
    </div>
    <div id="Full Output" class="tabcontent">
      <pre>
================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251+gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251+gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected

demo-tests/test_0.py::test0_fail_1 FAILED                                                                                                     [100%]

===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________

    def test0_fail_1():
        print("Test Fail 1!")
&gt;       assert 1 == 2
E       assert 1 == 2

demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================
</pre
      >
    </div>
    <script>
      function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; }
    </script>
    <script>
      document.getElementById("defaultOpen").click();
    </script>
    <script>
      var coll = document.getElementsByClassName("collapsible"); var i; for
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.08.20 14:42:28