如何让li根据高度适配ul？菜单蓝色区域高度适配求助

问题描述 #

制作菜单时遇到布局问题：左侧红色菜单显示正常，但右侧蓝色区域无法正确填充高度或实现自适应高度，期望达到左侧固定、右侧自适应高度的分栏菜单效果（参考图：）。

现有CSS代码 #

#header .navbar-responsive-collapse-mainMenu {
  border-top: gray;
  padding: 0;
  border-top-width: 2px;
}
#header .navbar-responsive-collapse-mainMenu span.title {
  color: #242932;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 14px;
  text-align: center;
}
#header .navbar-responsive-collapse-mainMenu .nav-menu-header {
  margin-left: 160px;
}
#header .navbar-responsive-collapse-mainMenu ul li a {
  font-family: rubikmedium;
  color: #242932;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 17px;
}
#header
  div.navbar-responsive-collapse-mainMenu
  ul.nav-menu-header
  > :first-child.open
  > a {
  color: #e31937;
}
#header
  div.navbar-responsive-collapse-mainMenu
  ul.nav-menu-header
  > :first-child
  > a {
  padding-left: 0;
}
#header .open > .dropdown-menu {
  display: flex;
  flex-direction: column;
  left: -161px;
  height: 550px;
  background-color : black;
  width: 1440px;
}
#header .ul-level-1 .li-level-1 {
  height: 40px;
  width: 264px;
  background-color: #FF7276;
  margin-left: 160px;
}
#header .ul-level-1 .li-level-1 a {
  color: #242932;
  font-family: latoregular;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22px;
}
#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 275px;
  width: 1005px;
  display: flex;
  flex-wrap: wrap;
}
#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
  width: 265px;
  margin-bottom: 8px;
  margin-left : 20px;
  background-color : #add8e6;
  display: inline-block;
  position: relative;
}

现有HTML代码 #

<header id="header">
  <nav class="navbar ng-isolate-scope" data-rbs-website-menu="" data-block-id="mainMenu" style="margin-bottom: 0;">
    <div class="collapse navbar-collapse navbar-responsive-collapse-mainMenu">
      <ul class="nav navbar-nav nav-menu nav-menu-header">
        <li class="dropdown open">
          <a data-toggle="dropdown" class="dropdown-toggle" target="_self" aria-expanded="true">
            Les produits <b class="caret"></b>
          </a>
          <ul class="dropdown-menu ul-level-1">
            <li class=" li-level-1">
              <a target="_self">offre du moment</a>
              <ul class="dropdown-sub-menu list-unstyled ul-level-2">
                <li class=" li-level-2">
                  <a target="_self">First Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">first sub-element</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">second sub-element</a>
                    </li>

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Second Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Third Category</a>
                  <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Ciseaux, équerres, compas</a>
                    </li>

                  </ul>
                </li>

                <li class=" li-level-2">
                  <a target="_self">Fourth Category
                </li>

                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                  </ul>
                </li>
                <li class=" li-level-2">
                  <a target="_self">Fifth Category</a>
                                    <ul class="dropdown-sub-menu list-unstyled ul-level-3">
                    <li class=" li-level-3">
                      <a target="_self">Blanc, typex et correcteurs</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                    <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>
                                                          <li class=" li-level-3">
                      <a target="_self">stylos à plumes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>

                    <li class=" li-level-3">
                      <a target="_self">stylos billes</a>
                    </li>
                  </ul>
                </li>

              </ul>
            </li>

            <li class=" li-level-1">
              <a target="_self">Les produits les plus vendus</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Cartouches d’encre</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Imprimantes</a>
            </li>

            <li class=" li-level-1">
              <a href="papiers/" target="_self">Papiers</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Fauteuils &amp; chaises</a>
            </li>

            <li class=" li-level-1">
              <a target="_self">Services généraux</a>
            </li>

          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>

解决方案 #

问题核心在于当前用margin偏移放置右侧内容，未采用左右分栏的弹性布局，导致高度无法联动。以下是针对性修改：

1. 重构顶级菜单布局 #

将顶级下拉菜单改为横向flex布局，移除固定高度，让高度自适应内容：

#header .open > .dropdown-menu {
  display: flex;
  flex-direction: row; /* 改为横向分栏 */
  left: -161px;
  background-color: black;
  width: 1440px;
  /* 移除固定height:550px */
}

2. 固定左侧菜单容器 #

给左侧一级菜单设置固定宽度，作为独立侧边栏：

#header .ul-level-1 {
  width: 264px;
  margin-left: 160px;
  display: flex;
  flex-direction: column; /* 保持垂直排列 */
}

#header .ul-level-1 .li-level-1 {
  height: 40px;
  background-color: #FF7276;
  margin-left: 0; /* 移除原有的偏移，由父容器控制 */
}

3. 调整右侧内容区域定位 #

将二级菜单设置为绝对定位，填充右侧剩余空间，确保高度和顶级菜单一致：

#header .ul-level-1 .li-level-1 .ul-level-2 {
  margin-left: 0;
  width: calc(1440px - 160px - 264px); /* 计算右侧可用宽度 */
  position: absolute;
  left: 424px; /* 左侧偏移量+左侧菜单宽度 */
  top: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  background-color: #add8e6;
  overflow-y: auto; /* 内容过多时显示滚动条 */
}

4. 优化二级菜单项样式 #

调整二级菜单项的间距，避免溢出：

#header .ul-level-1 .li-level-1 .ul-level-2 .li-level-2 {
  width: calc(33.33% - 13px); /* 三列布局，自动调整间距 */
  margin-bottom: 8px;
  margin-left: 10px;
  background-color: #add8e6;
  display: inline-block;
  position: relative;
}

5. 可选：添加悬停交互逻辑 #

实现鼠标悬停左侧菜单项时显示对应右侧内容：

#header .ul-level-1 .li-level-1 .ul-level-2 {
  display: none; /* 默认隐藏 */
}

#header .ul-level-1 .li-level-1:hover .ul-level-2 {
  display: flex; /* 悬停时显示 */
}

修改后，菜单会实现左侧固定、右侧自适应高度的分栏效果，和参考图一致。

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