Элементы расстояния, покрытые фиксированной навигацией

Question

Привет, ребята, у меня часто возникает эта проблема с большим количеством фиксированных navbars I.E, когда у меня есть фиксированный navbar, как я могу дать элементу под ним некоторый запас, так что фиксированный navbar не покрывает этот элемент.

Мне просто интересно, есть ли более элегантный способ сделать это отдельно от тега <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

Исправлено положение родственников в окне просмотра экрана. Вы можете просто установить верхнее поле или дополнение на теге body и сделать значение> = высоту навигатора.

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

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

Answer 2

Там теория, в CSS, что вы применяете только нижние поля. http://csswizardry.com/2012/06/single-direction-margin-declarations/

Так держать вещи модульными, вы можете создать класс оберточный:

<nav class="nav__wrapper"> 
    <div class="nav__content"> 
     Navigation 
    </div> 
</nav> 

<p>Text content</p> 

CSS:

.nav__wrapper { 
    height: 30px; 
    margin-bottom: 10px // breathing room 
} 

.nav__content { 
    background: #dadada; 
    height: 30px; 
    line-height: 30px; 
    position: fixed; 
    width: 100%; 
} 

скрипка: http://jsfiddle.net/wv53qLwz/