在响应式网站上调整 flex 页脚位置（使用 "translatedY" 个子元素）

Question

我正在尝试使用这些前提制作粘性页脚：

页脚是 position:fixed；
它的全局高度根据以下因素变化：
- 用户添加了多少子子菜单项（可能会有所不同）
- 媒体查询（改变字体大小）
- 字体大小（以视口单位为单位 "vw"）

有两个特定的媒体实例可以更改字体大小：

一个媒体查询 devices/screens 980 像素以下
和 1550px 以上的 devices/screens

我试图将页脚始终定位在页面底部，同时使其子元素出现在页面上方。然而，.sub-menu 项目的数量迫使页脚增加高度；好像这还不够，视口宽度正在改变字体大小，这也会影响元素的高度。

h1 {
font-size: 4vw;
letter-spacing: 0.02em;
}
h2, h3, ul.sub-menu {
 font-size:2.3vw;
  line-height: 1.4em;
 color: black;
}

.footermenu {
        bottom:0vh;
        left:0vw;
        position: fixed;
        width: 95vw;
        padding-right: 5vw; 
     height: 55vh; /*this seems to help but it is not reliable enough*/
     z-index:999; 
    }

    .footermenu ul { 
        justify-content: space-between; 
        display: flex;
    }

    .menu-item > ul.sub-menu {  
        padding: 1vh;
        text-align: center;
        flex-direction: column;
        opacity: 1;
        transition: 0.5s ease-out;
    }

    .menu > .menu-item:not(:first-child):not(:last-child), .menu-item:not(:first-child):not(:last-child) > ul.sub-menu {  
        text-align: center !important;
    flex: 0 1 33%;
    -webkit-flex: 0 1 33%;
    }

    .menu > .menu-item:first-child, .menu-item:first-child > ul.sub-menu {  
        text-align: left !important;
    flex: 0 1 33%;
    -webkit-flex: 0 1 33%;
    }

    .menu > .menu-item:last-child, .menu-item:last-child > ul.sub-menu {  
        text-align: right !important;
    flex: 0 1 33%;
    -webkit-flex: 0 1 33%;
    }
    
    /* from here on I am translating the sub-menu items up */

    .footermenu .menu-item:not(:first-child):not(:last-child) > ul.sub-menu {  
    -webkit-transform: translateY(calc(-100% - 15vh));
        transform: translateY(calc(-100% - 15vh));
    }

    .footermenu .menu-item:first-child > ul.sub-menu {  
    -webkit-transform: translateY(calc(-100% - 15vh));
        transform: translateY(calc(-100% - 15vh));
    }

    .footermenu .menu-item:last-child > ul.sub-menu {  
    -webkit-transform: translateY(calc(-100% - 15vh));
        transform: translateY(calc(-100% - 15vh));
    }

@media screen and (max-width: 980px) {
         h1  {
             font-size:6vw;
      letter-spacing: 0.02em;
          }
         h2, h3, ul.sub-menu a {
      font-size:3.6vw;
       line-height: 1.2em;
      color: black;
      }
   
  
     #content {
      margin: auto;
      width: 68vw
      margin-top: 25vh;
      }
    
    }
@media screen and (min-width: 1550px) {
         h1  {
             font-size:3.5vw;
                letter-spacing: 0.02em;
          }
         h2, h3, ul.sub-menu a {
      font-size:2.3vw;
       line-height: 1.2em;
      color: black;
      }
     .post .entry-content {
      margin-top: 1.5em;
      text-align:left;
      -webkit-column-count:1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
          column-count: 1;
      }
     .footermenu  {
      z-index:999;  
      height: 18vh!important; /*I am trying to fix the problem like this  but as said before this is not safe */
      }
       .post .entry-content { 
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
         -moz-column-count: 3; /* Firefox */
         column-count: 3;
     } 
     #content {
     margin: auto;
     width: 68vw;
     margin-top: 25vh;
     }
    }

 <div id="footer">
    <h1>  
        <div class="footermenu"> 
            <ul id="menu-footer-menu" class="menu">
                <li class="menu-item"><a href="url_4">Contact</a>
              <ul class="sub-menu">
                        <li class="menu-item"><a href="url_6_a">More  Landscapes</a></li>
                <li class="menu-item"><a href="url_6_b">Collection</a></li></ul>
              </li>
                <li class="menu-item"><a href="url_5">Links</a>
              <ul class="sub-menu">
                        <li class="menu-item"><a href="url_6_a">More Landscapes</a></li>
                        <li class="menu-item"><a href="url_6_b">Collection</a></li>
                        <li class="menu-item"><a href="url_6_c">Brave New</a></li>
                        <li class="menu-item"><a href="url_6_d">Line Three</a></li>
                        <li class="menu-item"><a href="url_6_e">Mary's World</a></li>
                    </ul>
              </li>
                <li class="menu-item"><a href="url_6">About</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="url_6_a">More  Landscapes</a></li>
                        <li class="menu-item"><a href="url_6_b">Collection</a></li>
                        <li class="menu-item"><a href="url_6_c">Brave New</a></li>
                        <li class="menu-item"><a href="url_6_d">Line Three</a></li>
                        <li class="menu-item"><a href="url_6_e">Mary's World</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </h1>
 </div><!-- end of #footer -->

无论总菜单项的数量、视口尺寸和字体大小如何，你能帮我把这个页脚始终放在同一个位置吗？

也欢迎使用 wordpress 引擎的 php 方法。所以总结一下：我正在尝试更改页脚菜单的 html 顺序，使父菜单项出现在其子菜单项之后。我已经使用 CSS "transform: translateY(n)" 完成了它，但这并不能完全解决我的问题，因为这种方法有太多变量。非常感谢。

Answer 1

我认为你不需要在这里使用转换。只需将代码中的 sub-menu ul 放在页脚菜单的主菜单 header <a> 标记之前。 menu-footer-menu 中不需要高度，并且您需要将每个主菜单 li 单独设置为 position:absolute 以使其保持在底部。

这是我将您的代码变成的。我认为这就是您所需要的。

http://codepen.io/Nasir_T/pen/jModxK

希望它有意义。如果需要更多帮助，请告诉我。

P.S。我想我在另一个问题中帮助您修复了菜单的左对齐、居中对齐和右对齐。我不是吗？ :)

Answer 2

在不深入了解您非常详细的要求的情况下，我认为您本质上想要的菜单是自下而上的。

由于您使用的是 flexbox，因此只需使用 flex-direction:column-reverse。

一个一般的例子。

* {
  margin: 0;
  padding: 0;
}
a {
  color: black;
  text-decoration: none;
}
ul {
  list-style: none;
}
#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: pink;
}
.footermenu {
  display: flex;
  justify-content: space-between;
}
.footermenu #menu-footer-menu {
  display: flex;
  flex: 1;
  justify-content: space-around;
  text-align: center;
}
#menu-footer-menu > li > a {
  color: red;
}
.menu-item {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
}

<div id="footer">
  <div class="footermenu">
    <ul id="menu-footer-menu" class="menu">
      <li class="menu-item"><a href="url_4">Contact</a>

        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More  Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
        </ul>
      </li>

      <li class="menu-item"><a href="url_5">Links</a>

        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
          <li class="menu-item"><a href="url_6_c">Brave New</a>
          </li>
          <li class="menu-item"><a href="url_6_d">Line Three</a>
          </li>
          <li class="menu-item"><a href="url_6_e">Mary's World</a>
          </li>
        </ul>
      </li>
      <li class="menu-item"><a href="url_6">About</a>
        <ul class="sub-menu">
          <li class="menu-item"><a href="url_6_a">More  Landscapes</a>
          </li>
          <li class="menu-item"><a href="url_6_b">Collection</a>
          </li>
          <li class="menu-item"><a href="url_6_c">Brave New</a>
          </li>
          <li class="menu-item"><a href="url_6_d">Line Three</a>
          </li>
          <li class="menu-item"><a href="url_6_e">Mary's World</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>
<!-- end of #footer -->

在响应式网站上调整 flex 页脚位置（使用 "translatedY" 个子元素）

Adjusting flex Footer position (with "translatedY" child elements) on a responsive website

html

css

flexbox

parent-child

viewport-units