如何使wrapper容器高度等于input与下拉ul的总高度？

问题根源在于Bootstrap默认的.dropdown-menu样式：它被设置为position: absolute，该属性会让元素脱离正常文档流，导致父容器（.dropdown和.wrapper）计算高度时完全忽略它的存在，所以你的.wrapper只能算出input元素的高度。

要让wrapper的高度等于input与ul的高度之和，只需将下拉列表拉回文档流：

修改方案 #

• 给.dropdown-menu添加position: static，覆盖Bootstrap默认的绝对定位
• 可选：调整ul的间距、边框样式，优化视觉连贯性

修改后的CSS代码：

.wrapper {
  width: 95%;
  height: fit-content;
  padding: 1%;
  background-color: saddlebrown;
}

.wrapper .dropdown {
    width: 100%;
    height: fit-content;
    background-color: aqua;
}

.wrapper .dropdown input {
    width: 100%;
    border: 1px solid #000000;
}

.wrapper .dropdown ul.dropdown-menu {
    display: block;
    width: 100%;
    position: static; /* 关键修改：取消绝对定位 */
    margin-top: 0.5rem; /* 可选：调整与input的间距 */
    border-top: none; /* 可选：去掉顶部边框，让视觉更连贯 */
}

.wrapper .dropdown ul li a {
    cursor: pointer;
}

完整示例代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="wrapper">
  <div class="dropdown">
    <input class="form-control" placeholder="Locate your item" />
    <ul class="dropdown-menu">
      <li><a class="dropdown-item">Item 1</a></li>
      <li><a class="dropdown-item">Item 2</a></li>
    </ul>
  </div>
</div>

修改后，.dropdown-menu会回到正常文档流中，.dropdown和.wrapper的fit-content高度会自动包含input与ul的总高度。

内容的提问来源于stack exchange，提问作者seriously