0
我試圖與這些前提粘性頁腳調整（用「translatedY」子元素）柔性頁腳位置：在響應網站
- 頁腳位置：固定;用戶添加
- 多少孩子.SUB菜單項（可能會發生變化）
- 媒體查詢（即改變字體大小）
- 的字體 - ：
- 其全局的高度，根據變化大小（其在視口單元歸因「VW」）
有跡象表明，改變字體大小兩個特定媒體實例：
- 一個媒體查詢設備/屏幕婁980px
- ，一個用於設備/屏幕上方1550px
我想總是定位頁腳在頁面的底部，而focing其子元素出現在它上面。但是.sub菜單項的數量迫使頁腳高度增長;就好像這還不夠，視口寬度正在改變字體大小，這也會影響元素的高度。
h1 {
font-size: 4vw;
letter-spacing: 0.02em;
}
h2, h3, ul.sub-menu {
\t font-size:2.3vw;
\t line-height: 1.4em;
\t color: black;
}
.footermenu {
bottom:0vh;
left:0vw;
position: fixed;
width: 95vw;
padding-right: 5vw;
\t height: 55vh; /*this seems to help but it is not reliable enough*/
\t 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) {
\t h1 \t {
\t font-size:6vw;
\t \t letter-spacing: 0.02em;
\t \t }
\t h2, h3, ul.sub-menu a {
\t \t font-size:3.6vw;
\t \t line-height: 1.2em;
\t \t color: black;
\t \t }
\t
\t #content {
\t \t margin: auto;
\t \t width: 68vw
\t \t margin-top: 25vh;
\t \t }
}
@media screen and (min-width: 1550px) {
\t h1 \t {
\t font-size:3.5vw;
letter-spacing: 0.02em;
\t \t }
\t h2, h3, ul.sub-menu a {
\t \t font-size:2.3vw;
\t \t line-height: 1.2em;
\t \t color: black;
\t \t }
\t .post .entry-content {
\t \t margin-top: 1.5em;
\t \t text-align:left;
\t \t -webkit-column-count:1; /* Chrome, Safari, Opera */
\t \t -moz-column-count: 1; /* Firefox */
\t \t column-count: 1;
\t \t }
\t .footermenu {
\t \t z-index:999; \t \t
\t \t height: 18vh!important; /*I am trying to fix the problem like this but as said before this is not safe */
\t \t }
.post .entry-content {
\t -webkit-column-count: 3; /* Chrome, Safari, Opera */
\t -moz-column-count: 3; /* Firefox */
\t column-count: 3;
\t } \t
\t #content {
\t margin: auto;
\t width: 68vw;
\t margin-top: 25vh;
\t }
}<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）」來完成它，但是這並不能完全解決我的問題，因爲這種方法有太多變量。 非常感謝。
這就是它。非常感謝你。 –