css - 底部和固定 ul 之间的空间

Question

我希望我的导航栏固定在屏幕底部。但是，现在导航栏 (ul) 和屏幕底部之间有一些空间。只有 margin-bottom: -1% 似乎有效，但我想在没有它的情况下修复它，或者至少理解为什么它在没有负边距的情况下不起作用。

body 标签中没有设置限制高度大小，网站上的其他内容一直延伸到底部。

CSS:

        #wrapper{
            position: relative;
            width: 98%;
            left: 1%;
        }
        #navbar{
            position: fixed;
            z-index: 100;
            bottom: 0;
            left: 50%;
            transform: translate(-50%,-50%);
            /*margin-bottom: -1%;*/
        }
        #navbar ul{
            outline: 1px solid black;
            list-style-type: none;
        }
        #navbar ul li{
            outline: 1px solid black;
            display: inline-block;
        }

HTML(导航栏位于#wrapper 内，没有别的):

 <div id="wrapper">
        <nav id="navbar">
            <ul>
                <li>Ändra inställningar</li>
                <li>+ Nytt pass</li>
            </ul>
        </nav>
...other stuff...
</div>

Answer 1

在您的情况下，您应该为 #navbar 设置高度，这样可以解决问题

#navbar{
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,-50%);
    /*margin-bottom: -1%;*/
    height:22px;
}

http://jsfiddle.net/c31y7kL0/