如何消除固定底部菜单和窗口底部之间的边距？

的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

如何消除固定底部菜单和窗口底部之间的边距？

回答

相关问题