Html 如何消除固定底部菜单和窗口底部之间的空白？_Html_Css

Html 如何消除固定底部菜单和窗口底部之间的空白？

html css

Html 如何消除固定底部菜单和窗口底部之间的空白？,html,css,Html,Css,HTML是： <html> <head> <style> #top-menu { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; width: 100%; background-color:rgba(

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>


#顶部菜单{
位置：固定；
z指数：10；
左：0；
右：0；
底部：0；
宽度：100%；
背景色：rgba（255255,0,0.5）；
}
#顶级菜单李{
浮动：左；
列表样式：无；
}
#顶部菜单a{
显示：块；
填充：10px 25px 5px 25px；
宽度：4em；
文本对齐：居中；
-webkit过渡：.5s全部缓解；
-moz过渡：.5s全部放松；
过渡期：所有人都放松下来；
边框底部：3倍纯青色；
颜色：#aaa；
文字装饰：无；
}
#顶部菜单a：悬停{
颜色：#000；
}
#顶部菜单li.active a{
边框底部：3px实心#333；
颜色：红色；
}
#福{
边缘顶部：400px；
}
#酒吧{
边缘顶部：400px；
}
#巴兹{
边缘顶部：400px；
}










福
酒吧
巴兹

当我在Firefox42中测试它时，固定底部菜单和窗口底部之间有一些空白

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

这是因为

ul

元素具有默认的上/下

边距
在这种情况下，可以将margin:0
添加到#顶部菜单
元素中，也可以使用CSS重置来重置所有ul
元素的默认边距

这是因为ul
元素具有默认的上/下边距
在这种情况下，可以将margin:0
添加到#顶部菜单
元素中，也可以使用CSS重置来重置所有ul
元素的默认边距

将规则ul{margin:0}
添加到CSSAdd规则ul{margin:0}添加到CSS
#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);
}