Question

我希望我的导航栏固定在屏幕底部。但是，现在导航栏（ul）和屏幕底部之间存在一些空间。只有保证金底部：-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/

底部和固定ul之间的空间

1 个答案: