时间戳

首页 > 解决方案 > CSS：子菜单高度：100% // 位置：固定

html - CSS：子菜单高度：100% // 位置：固定

问题描述

当我们有很多“li”时，我尝试了很多元素样式来创建可滚动的子菜单。发生的情况是，当父级打开时，子菜单将偏移移​​动屏幕，并且不创建滚动。

无论如何都要强制父级“menu-item-486”（当我们在 $this 中有静态位置时；以及元素高度为 100% 的子菜单）创建高度不小于 100% 的滚动（即.: 子菜单高度：400px);

如有必要，我创建一个类“fixHeightOffset”以供使用。

我的菜单或多或少是这样的：

<div class="menu-menu-container">
<ul id="primary-menu" class="nav navbar-nav">
<li id="menu-item-15"><a href="#">Home</a></li>


<li id="menu-item-486" class="menu-item menu-item-has-children sub-menu-open"><a href="#">Menu</a>
<ul class="sub-menu show fixHeightOffset">
<li id="menu-item-1" class="menu-item menu-item-1"><a href="#">All</a></li>
<li id="menu-item-4" class="menu-item menu-item-4"><a href="#">A</a></li>
<li id="menu-item-5" class="menu-item menu-item-5"><a href="#">B</a></li>
<li id="menu-item-6" class="menu-item menu-item-6"><a href="#">C</a></li>
<li id="menu-item-7" class="menu-item menu-item-7 menu-item-has-children sub-menu-open">
<a href="#">I</a>
    <ul class="sub-menu show">
    <li id="menu-item-57" class="menu-item menu-item-57"><a href="#">D</a></li>
    <li id="menu-item-59" class="menu-item menu-item-59"><a href="#">M</a></li>
    <li id="menu-item-60" class="menu-item menu-item-60"><a href="#">B </a></li>
    </ul>
</li>
    <li id="menu-item-48" class="menu-item menu-item-48"><a href="#">L</a></li>
    <li id="menu-item-51" class="menu-item menu-item-51"><a href="#">M</a></li>
    <li id="menu-item-46" class="menu-item menu-item-46"><a href="#">N</a></li>
    <li id="menu-item-47" class="menu-item menu-item-47"><a href="#">O</a></li>
    <li id="menu-item-50" class="menu-item menu-item-48"><a href="#">P</a></li>
</ul>
</li>
</ul>
</div>

谢谢！

标签： htmlcssheight

解决方案

推荐阅读