Question

我有一个动态的超级菜单项，当打开高度因数据而异时，通常高度会导致元素延伸超过粘性页脚（也是绝对位置），这实际上并不是我想要的，是除了创造不必要的内容以填补空白之外还有其他解决方案吗？

html -

    <nav class="menu__base drop-shadow--standard desktop" style="background:#034774;;">
<div class="container">
      <ul class="menu__items menu__items--hidden">
        <li class="menu__item menu__sub-menu-item">nav item</li>
        <li class="menu__item menu__sub-menu-item">nav item</li>
        <li class="menu__item menu__sub-menu-item open">
          <span class="menu__sub-menu-item__title">Open nav item</span>
          <span class="menu__item__hover-underline"></span>

          <div class="menu__sub-menu-wrapper drop-shadow--standard" style="height: 732px; left: -2px; background-color: #034774;">
            <div class="menu__sub-menu" style="margin-top: 0px;">
              <div class="menu__mega-menu">
                <div class="mega-menu-multi-race ">
                  <table class="mega-menu-multi-race__table">
                    content, lots and lots of content inside the open nav item
                  </table>
                </div>
              </div>
              </div>
            </div>
        </li>
        <li class="menu__item menu__sub-menu-item">nav item</li>
      </ul>
      </div>
</nav>

<div class="container">
  <p>
  content inbetween
  </p>
</div>

<div class="container">
  <p>
  more content
  </p>
</div>

<div class="container">
  <p>
  more content.............
  </p>
</div>
<footer class="container-fluid footer">
  <section class="row">
    <div class="container padding-all-10">
        <div class="footer__info">
          <div class="col-lg-6 col-md-6 col-xs-12 padding-lf-0">
          <p class="margin-all-0">Sticky footer</p>
        </div>
      </div>
    </div>
  </section>
</footer>

css -

.menu__sub-menu-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    overflow: hidden;
    margin-top: 2px;
    left: -2px;
}
.menu__sub-menu {
    left: 0;
    top: 0;
}

.menu__item {
    float: left;
    position: relative;
    border-right: solid 2px #053b5e;
    font-weight: bold;
    font-size: 17px;
    list-style-type: none;
    min-width: 100px;
    text-align: center;
    padding:5px;
}

.menu__items {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
}

.footer {
    width: 100%;
    background:red;
    font-size: 17px;
    position: absolute;
    bottom: 0;
}

链接到小提琴 - https://jsfiddle.net/2648daniel/wo3jxjb8/

Answer 1

丹，

我已经修改了你的小提琴，并取得了你的成就。根据固定高度或该块内的任何内容，菜单不再根据需要与页脚重叠并进行缩放。

https://jsfiddle.net/2gLLkoks/7/

总之，我已经使用了浮动元素的组合，或者根据需要清除浮动元素。例如

.menu__sub-menu-wrapper {
    float:left;  
    ...

.menu__sub-menu {
  float:left;
    ...

    ....
    <div class="clear"></div>
</nav>

等

我还从元素中删除了绝对定位，并添加了一个内容包装器，它绝对定位有负z-index，因此它出现在子菜单下。

 .containerWrapper {position:absolute;top:50px;float:left;z-index:-1}

<div class="containerWrapper">
    <div class="container">
        <p>
           more content...........

希望这会有所帮助;）

绝对定位元素延伸到粘性页脚

1 个答案: