如何消除固定底部菜單和窗口底部之間的邊距？

的HTML是：如何消除固定底部菜單和窗口底部之間的邊距？

<html> 
<head> 
    <style> 
     #top-menu { 
      position: fixed; 
      z-index: 10; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      width: 100%; 
      background-color:rgba(255,255,0,0.5); 
     } 

     #top-menu li { 
      float: left; 
      list-style: none; 
     } 

     #top-menu a { 
      display: block; 
      padding: 10px 25px 5px 25px; 
      width: 4em; 
      text-align: center; 
      -webkit-transition: .5s all ease-out; 
      -moz-transition: .5s all ease-out; 
      transition: .5s all ease-out; 
      border-bottom: 3px solid cyan; 
      color: #aaa; 
      text-decoration: none; 
     } 

     #top-menu a:hover { 
      color: #000; 
     } 

     #top-menu li.active a { 
      border-bottom: 3px solid #333; 
      color: red; 
     } 

     #foo { 
      margin-top: 400px; 
     } 

     #bar { 
      margin-top: 400px; 
     } 

     #baz { 
      margin-top: 400px; 
     } 
    </style> 
</head> 
<body> 

    <ul id="top-menu"> 
     <li class="active"> 
     <a href="#">Top</a> 
     </li> 
     <li> 
     <a href="#foo">Foo</a> 
     </li> 
     <li> 
     <a href="#bar">Bar</a> 
     </li> 
     <li> 
     <a href="#baz">Baz</a> 
     </li> 
    </ul> 

    <h2 id="foo">Foo</h2> 
    <h2 id="bar">Bar</h2> 
    <h2 id="baz">Baz</h2> 

</body> 
</html>

當我在Firefox 42測試它，有固定的底部的菜單和窗口的底部之間有一些裕度。

如何消除固定底部菜單和窗口底部之間的邊距？

來源

2015-11-21 letiantian

添加規則'UL {保證金：0}'你的CSS –

這是因爲ul元素有一個默認的頂部/底部margin。

在這種情況下，可以將margin: 0添加到#top-menu元素，或者只需使用CSS重置爲所有ul元素重置默認頁邊距。

Example Here

#top-menu { 
    position: fixed; 
    margin: 0; /* Added */ 
    z-index: 10; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    width: 100%; 
    background-color:rgba(255, 255, 0, 0.5); 
}

來源

2015-11-21 03:45:23

如何消除固定底部菜單和窗口底部之間的邊距？

回答

相關問題