當視口變小時，頁腳容器覆蓋導航

我在側欄上發現了這個錯誤。當我縮小瀏覽器的大小時，爲了測試側欄，註銷文本和圖標正在導航上方移動。我在那裏做錯了什麼？當視口變小時，頁腳容器覆蓋導航

這裏是一個jsfiddle的側邊欄的完整代碼。希望你能幫助我。謝謝。

這裏是我的代碼

.pulse-menu { 
 
    background-color: #fafafa; 
 
    width: 19.286em; 
 
    position: fixed; 
 
    z-index: 1050; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    text-transform: uppercase; 
 
    overflow-y: scroll; 
 
} 
 
.menu-bg { 
 
    width: 270px; 
 
    height: 230px; 
 
    background: url(../img/media/menu_bg.svg); 
 
    background-size: 270px 221px; 
 
    background-repeat: no-repeat; 
 
} 
 
.sidebar-profile { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 20px 0; 
 
    color: #333; 
 
    line-height: 0.6em; 
 
} 
 
.sidebar-profile img { 
 
    border-radius: 100%; 
 
    height: 60px; 
 
    width: 60px; 
 
} 
 
.sidebar-profile h5 { 
 
    padding-top: 0.50em; 
 
    color: #a8a8a8; 
 
    font-size: 1.02em; 
 
} 
 
.pulse-menu>nav ul { 
 
    padding: 0; 
 
    list-style-type: none; 
 
} 
 
.pulse-menu>nav>ul>li>a { 
 
    color: #333; 
 
    display: block; 
 
    font-size: 1.02em; 
 
    height: 40px; 
 
    line-height: 0px; 
 
    padding-bottom: 1.5em; 
 
    padding-left: 2em; 
 
    padding-right: 2em; 
 
    padding-top: 1.5em; 
 
    text-align: center; 
 
} 
 
.sidebar-footer { 
 
    height: 50px; 
 
    position: absolute; 
 
    width: 100%; 
 
    bottom: 0; 
 
    list-style-type: none; 
 
    padding-bottom: 7.5em; 
 
} 
 
nav>.sidebar-footer>a, 
 
nav>.sidebar-footer>a> h5 { 
 
    color: #333; 
 
    display: block; 
 
    font-size: 1.02em; 
 
    padding-bottom: 1.5em; 
 
    padding-left: 2em; 
 
    padding-right: 2em; 
 
    padding-top: 0.5em; 
 
    text-align: center; 
 
}

<div class="pulse-menu"> 
 
    <div class="menu-bg clearfix"> 
 
    <div class="sidebar-profile"> 
 
     <img src="img/users/avatar.jpg" class="sidebar-img" alt="Candice Swanepoel" title="Candice Swanepoel" /> 
 
     <h5>Candice Swanepoel</h5> 
 
    </div> 
 
    </div> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Dashboard</a> 
 
     </li> 
 
     <li><a href="#">Models</a> 
 
     </li> 
 
     <li><a href="#">Kunden</a> 
 
     </li> 
 
     <li><a href="#">Finanzen</a> 
 
     </li> 
 
     <li><a href="#">Mitarbeiter</a> 
 
     </li> 
 
     <li><a href="#">Einstellung</a> 
 
     </li> 
 
    </ul> 
 
    <div class="sidebar-footer"> 
 
     <a href="#"> 
 
     <li><i class="icon-cloud-upload circle-icon"></i> 
 
     </li> 
 
     <h5>Logout</h5> 
 
     </a> 
 
    </div> 
 
    </nav> 
 

 
</div>

來源

2016-09-29 kdskii

em對於填充意味着填充始終保持相同高度（相對於字體大小），請嘗試使用vh或vw - 它們與視口高度相關的寬度爲 –

dosnt工作。我有同樣的問題，當我將填充改爲vh – kdskii

的時候，你將不得不使用它。只要你對頁腳有絕對定位，響應更復雜，也許可以嘗試一個媒體查詢 –

的屏幕小於320px的

使用媒體查詢3210

在這個媒體查詢調整您註銷文字和圖標

來源

2016-09-29 13:53:18 CasperSL

把你的樣式表如下nav { position:relative; padding-bottom: 10em;}讓我知道，如果這就是你要找的內容，或者是否有你想要解決其他事情。

來源

2016-09-29 14:01:57

當視口變小時，頁腳容器覆蓋導航

回答

相關問題