我正试图用这些前提制作粘性页脚：
有两个特定的媒体实例可以更改字体大小：
我试图将页脚始终放在页面底部，同时将其子元素放在其上方。然而.sub菜单项的数量迫使页脚高度增长;好像这还不够，视口宽度会改变字体大小，这也会影响元素的高度。
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）”完成了它，但是这并没有完全解决我的问题，因为这个方法有太多的变量。 非常感谢。
答案 0 :(得分：1)
我认为你不需要在这里使用变换。只需将子菜单ul放在代码菜单的主菜单标题<a>标记之前的代码中。菜单页脚菜单中不需要高度，您还需要将每个主菜单li分别设置为position：absolute以保持在底部。
以下是我将代码转换为的内容。我认为这就是你所需要的。
http://codepen.io/Nasir_T/pen/jModxK
希望它有意义。如果需要更多帮助，请告诉我。
P.S。我想我帮你修复了另一个问题中的左，中，右对齐菜单。不是吗？ ：）
答案 1 :(得分：1)
如果没有详细了解您的详细要求，我认为您基本上想要菜单就是这样。
由于您使用的是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 -->