问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何控制下拉框高度，使其在父容器之外不撑开高度？

头像
很酷的竹笋
    122


    我想写一个超出最大高度显示滚动条，但是下拉框需要展示到外层，现在设置了以后，下拉框会撑开外层元素的高度

    有什么方法可以使得下拉框展示到外层呢

    css样式滚动条
    阅读 1.8k
    avatarAI BotBETA

    要使下拉框超出容器高度并显示滚动条，同时不撑开容器，你可以使用 CSS 的 overflow 属性。以下是一种可能的实现方法：

    1. 设置容器的 overflow 属性为 hidden：这将确保超出容器的内容被隐藏。
    2. 设置下拉框的 overflow 属性为 auto 或 scroll：这将使下拉框在需要时显示滚动条。
    3. 调整下拉框的高度：你可以使用 height 属性来设置下拉框的高度。如果你想要下拉框的高度超过容器，可以设置一个较大的值。

    以下是一个示例的 CSS 代码：

    .container {
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.dropdown {
  overflow: auto; /* 显示滚动条 */
  height: 200px; /* 设置下拉框的高度 */
}

    请注意，这种方法将使下拉框的高度超过容器，并显示滚动条。但是，由于容器的 overflow 属性设置为 hidden，下拉框不会撑开容器的高度。如果你希望下拉框能够撑开容器，可以考虑使用其他布局方法或调整 CSS 样式。

    4 个回答
    得票最新
    头像
    木木剑光
      2.2k1422
      1. 如果用的是主流的 UI 库，弹框类的组件通常都会提供指定元素挂载到哪个父容器下的配置，比如 antd 的 getConainer
        image.png

      2. 自己开发的话

        image.png

      综上，如果不是自己练手的话，最好用现成的组件库，省时省力

      这里是一个demo，可以参考一下

      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            position: relative;
        }
    </style>
</head>
<body>
    <div
        style="
            overflow: auto;
            width: 500px;
            height: 500px;
            border: 1px solid black;
        "
    >
        container
        <input type="text" style="position: absolute; margin: 50px 0;">
        <div style="
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            background-color: aqua;
            position: absolute;
            top: 70px;
            left: 73px;
        ">popup</div>
    </div>
</body>
</html>

      image.png

      头像
      無心幽彌狂
        3214

        可以参考 element-ui, 下拉选项列表元素是在 body 层后追加的子元素, 选项列表设置 absolute 定位飘起来, 就不会占用当前层级容器的宽高了

        头像
        heath_learning
          1.4k32029

          你可以试下这个插件 easyest-dropdown(最简单的下拉插件)

          代码如下：

          <head>
  <!--If you don't use the css that comes with easyest-dropdown, then you don't need to import it-->
  <!--<link rel="stylesheet" href="./easyest-dropdown.css">-->
  <script src="./easyest-dropdown.js"></script>
</head>

<body>
    <button type="button" class="btn btn-primary" id="referenceEl">Show custom dropdown</button>
    
    <ul id="dropdownEl" class="my-custom-dropdown easyest-dropdown-transition">
      <li>Html</li>
      <li>Javascript</li>
      <li>Css</li>
      <li>Vue <small>(渐进式JavaScript框架)</small></li>
      <li>React <small>(构建Web和原生交互界面的库)</small></li>
      <li>Angular <small>(一个应用设计框架与开发平台)</small></li>
    </ul>
    <script>
      var referenceEl = document.getElementById('referenceEl');
      var dropdownEl = document.getElementById('dropdownEl');
      var isShow = false;
      referenceEl.addEventListener('click', function () {
        if (isShow) {
          dropdownEl.style.display = 'none';
          isShow = false;
          return;
        }
        var dropdownPosition = easyestDropdown.getDropdownDirection(referenceEl, dropdownEl, 'bottom', true);
        console.log('dropdownPosition', dropdownPosition);
        dropdownEl.style.left = dropdownPosition.right == null ? (dropdownPosition.left + 'px') : 'auto';
        dropdownEl.style.right = dropdownPosition.right != null ? (dropdownPosition.right + 'px') : '';
        dropdownEl.style.top = dropdownPosition.bottom == null ? (dropdownPosition.top + 'px') : 'auto';
        dropdownEl.style.bottom = dropdownPosition.bottom != null ? (dropdownPosition.bottom + 'px') : '';
        dropdownEl.style.display = 'block';
        var classNameArr = dropdownEl.className.split(' ');
        var placementClassName = classNameArr.find(function (className) {
          return className.startsWith('easyest-placement-');
        });
        if (placementClassName) {
          dropdownEl.classList.remove(placementClassName);
        }
        dropdownEl.classList.add('easyest-placement-' + easyestDropdown.camelCase2KebabCase(dropdownPosition.direction));
        isShow = true;
      }, false);
    </script>
</body>
          头像
          很酷的竹笋
            122

            最后计算位置定位了，其他方法都不太行

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题
            宣传栏