Question

我有以下代码（从React简化）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <style>
      .container {
        background-color: #8fb8ff;
        width: 15.75rem;
        padding: 1rem;
        position: absolute;
        z-index: 3;
        border-radius: 0.25rem;
        box-shadow: 0 1px 4px #d7d8db;
        height: 2.25rem;
      }
      .item {
        background-color: #FFF68F;
        border-bottom: 1px solid #e7eefe;
        padding: calc(1em - 0.5rem);
        font-size: inherit;
      }
      .input__container {
        display: block;
        width: 100%;
        max-width: 100%;
      }
      .input__dropdown {
        position: relative;
      }
      .input__dropdown__container {
        position: absolute;
        z-index: 3;
        top: 100%;
        left: 0;
        min-width: 100%;
        border-radius: 0;
      }
      .input__textinput {
        position: relative
        display: flex;
        width: 100%;
        border-bottom: 1px solid #777b83;
        align-items: center;
        font-size: inherit;
        padding: calc(1em - 0.5rem)
      }
      .input__textinput__border {
        position: absolute;
        display: block;
        bottom: 0%;
        left: 50%;
        width: 0;
        border-bottom: solid 2px #3264c8;
        transform: translate(-50%, 1px);
      }
      .input__textinput__input {
        flex: 1;
        font-size: inherit;
        width: 100%;
        background-color: #baff8f;
        border: 0;
      }
      .input__textinput__trailing-icon {
        padding: 0.0.125rem;
        cursor: pointer;
      }
      .window__content__text {
        flex: 1;
      }
      .window__content {
        display: flex;
        white-space: preline;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="input__container">
        <div class="input__dropdown">
          <div class="window__content">
            <div class="window__content__text">
              <div class="input__textinput">
                <input class="input__textinput__input" autocomplete="nofill" onclick="toggledropdown()" placeholder="Search User" type="text">
                <i class="input__textinput__trailing-icon"></i>
                <div class="input__textinput__border"></div>
              </div>
              <div class="input__dropdown__container" id="dropdown">
                <div class="item">Item 1</div>
                <div class="item">Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      function toggledropdown () {
  var x = document.getElementById("dropdown")

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
    </script>
  </body>
</html>

我希望蓝色父div具有不同的高度：当下拉列表不可见时，高度为2.25 rem。如果下拉菜单中只有1个选项，则为4.25rem。如果有2个或更多选项，则为7.25rem，并且如果需要，将在蓝色div上滚动。我想了解的是，使用CSS可以做到这一点吗？如果可能，我想避免使用javascript。谢谢

Answer 1

删除绝对位置，以便菜单占用容器中的空间。然后将容器的高度更改为最小高度。

function toggledropdown () {
  var x = document.getElementById("dropdown")

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

.container {
        background-color: #8fb8ff;
        width: 15.75rem;
        padding: 1rem;
        position: absolute;
        z-index: 3;
        border-radius: 0.25rem;
        box-shadow: 0 1px 4px #d7d8db;
        min-height: 2.25rem;
        max-height: 7.25rem;
      }
      .item {
        background-color: #FFF68F;
        border-bottom: 1px solid #e7eefe;
        padding: calc(1em - 0.5rem);
        font-size: inherit;
      }
      .input__container {
        display: block;
        width: 100%;
        max-width: 100%;
      }
      .input__dropdown {
        position: relative;
      }
      .input__dropdown__container {
        z-index: 3;
        top: 100%;
        left: 0;
        min-width: 100%;
        border-radius: 0;
      }
      .input__textinput {
        position: relative
        display: flex;
        width: 100%;
        border-bottom: 1px solid #777b83;
        align-items: center;
        font-size: inherit;
        padding: calc(1em - 0.5rem)
      }
      .input__textinput__border {
        position: absolute;
        display: block;
        bottom: 0%;
        left: 50%;
        width: 0;
        border-bottom: solid 2px #3264c8;
        transform: translate(-50%, 1px);
      }
      .input__textinput__input {
        flex: 1;
        font-size: inherit;
        width: 100%;
        background-color: #baff8f;
        border: 0;
      }
      .input__textinput__trailing-icon {
        padding: 0.0.125rem;
        cursor: pointer;
      }
      .window__content__text {
        flex: 1;
      }
      .window__content {
        display: flex;
        white-space: preline;
      }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
  </head>
  <body>
    <div class="container">
      <div class="input__container">
        <div class="input__dropdown">
          <div class="window__content">
            <div class="window__content__text">
              <div class="input__textinput">
                <input class="input__textinput__input" autocomplete="nofill" onclick="toggledropdown()" placeholder="Search User" type="text">
                <i class="input__textinput__trailing-icon"></i>
                <div class="input__textinput__border"></div>
              </div>
              <div class="input__dropdown__container" id="dropdown">
                <div class="item">Item 1</div>
                <div class="item">Item 2</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

父母根据孩子扩大身高

1 个答案: