html - 固定导航栏覆盖的间距元素

Question

我经常遇到很多固定导航栏的问题，即当我有一个固定导航栏时，我如何给它下面的元素一些边距，这样固定导航栏就不会覆盖那个元素？

我只是想知道除了 <br> 之外是否还有更优雅的方式来做到这一点标记和 margin-top .

示例代码如下:

HTML 代码:

    <nav>
        I AM NAVBAR
    </nav>
    <br><br>
    <div>

    </div>

CSS 代码:

* {
                padding: 0;
                margin: 0;
            }

            nav {
                height: 50px;
                width: 100%;
                background: #444;
                color: #fff;
                text-align: center;
                font-weight: bold;
                font-family: verdana;
                position: fixed;
                top: 0;
                left: 0;
            }

            div {
                height: 500px;
                width: 100%;
                background: tomato;
            }

Fiddle在这里。

Answer 1

相对于屏幕视口(viewport)的固定位置。您可以只在 body 标签上设置上边距或填充，并使值 >= 导航栏高度。

body {
    margin-top: 50px; /*or padding*/
}

http://jsfiddle.net/5k5mxcn1/1/