Удаление места между навигационной панелью и баннером

Я использую Bootstrap для создания собственного сайта, но у меня есть проблема. У меня есть большое пространство между моим баннером и навигационной панелью. Мне нужно удалить его, не нарушая ничего.
Я искал исправления на этом веб-сайте и на других веб-сайтах, но никто из них не работает. Вот код:Удаление места между навигационной панелью и баннером

HTML: http://pastebin.com/FSFA4GhG CSS: http://pastebin.com/TiQ1nm9h

я понял, что проблема заключается в <header> где-то, но я не могу это исправить/найти эту ошибку.

источник

2015-12-04 Fredo Urbánek

Отправьте свой код на свой вопрос, пожалуйста. – j08691

У вас есть набор заголовков при 100px (значение по умолчанию - min-height: 50px) и измените свойство top на banner, а также на 50px

Sidenote: у вас есть два отдельных идентификатора, установленных на вашем navbar-collapse, что приводит к неправильной работе мобильного навигатора.

См. Пример Snippet.

body, 
 
div, 
 
h1, 
 
h2, 
 
p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    text-align: left; 
 
} 
 
header { 
 
    height: 50px; 
 
    width: 100%; 
 
    background: #f00; 
 
    z-index: 50; 
 
    position: fixed; 
 
    display: inline-block; 
 
    padding: 0; 
 
} 
 
#banner { 
 
    width: 100%; 
 
    height: 500px; 
 
    position: fixed; 
 
    top: 50px; 
 
    background: #AE1; 
 
} 
 
#content { 
 
    width: 100%; 
 
    position: relative; 
 
    top: 400px; 
 
    background: #ebe; 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="container"> 
 
    <header> 
 
    <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">MENU</a> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li class="dropdown"> 
 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">11</a> 
 
       </li> 
 
       <li><a href="#">12</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">gg2</a> 
 
      </li> 
 
      <li><a href="#">gg 3</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </header> 
 

 
    <div id="banner"> 
 
    <h2>BANNER</h2> 
 

 
    </div> 
 
    <div id="content"> 
 
    <p> 
 
     CONTENT 
 
    </p> 
 

 
    </div> 
 
</div>

источник

2015-12-04 22:12:38 vanburen

Спасибо! Большое спасибо! Вы мне очень помогли! –

Без проблем и радости я мог бы помочь! – vanburen

Это просто, просто удалить свойство высоты от вашего #header и поставить правильно верхнее свойство на ваш #banner (то же самое, что ваш рост СЧА):

body, div, h1, h2, p{ 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 
    
 
    body{ 
 
     text-align: left; 
 
    } 
 
    header{ 
 
     width: 100%; 
 
     z-index: 50; 
 
     position: fixed; 
 
     display: inline-block; 
 
    } 
 
    
 
    #banner { 
 
     width: 100%; 
 
     height: 500px; 
 
     position: fixed; 
 
     top: 50px; 
 
     background: #AE1; 
 
    
 
    } 
 
    
 
    #content { 
 
     width: 100%; 
 
     position: relative; 
 
     top: 400px; 
 
     background: #ebe; 
 
     height: 1000px; 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
     <meta charset="UTF-8"> 
 
     <title>Fred WEB</title> 
 
<!--Zobrazenie pre mobily--> 
 
     <meta name="viewport" content="width=device-width,initial-scale=1"> 
 
    
 
<!--Pridanie JQuery a Boostrapu--> 
 
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    
 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
 
    
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> 
 
     </script> 
 
    
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"> 
 
     </script> 
 
    
 
</head> 
 
<body> 
 
     
 
<div id="container"> 
 
     <header> 
 
    
 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span>       
 
     </button> 
 
     <a class="navbar-brand" href="#">MENU</a> 
 
    </div> 
 
    <div id ="menu" class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">gg 1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">11</a></li> 
 
           <li><a href="#">12</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">gg2</a></li> 
 
     <li><a href="#">gg 3</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
     </header> 
 
    
 
     <div id="banner"> 
 
         <h2>BANNER</h2> 
 
    
 
     </div> 
 
     <div id="content"> 
 
       <p> 
 
         CONTENT 
 
       </p> 
 
     
 
     </div> 
 
</div> 
 
    
 
    
 
</body> 
 
</html>

источник

2015-12-04 22:10:02

Большое спасибо! –

пытаются добавить

nav { 
 
    margin: 0px !important; 
 
    }

и редактировать правило баннер

#banner { 
 
     width: 100%; 
 
     height: 500px; 
 
     position: fixed; 
 
     top: 50px; 
 
     background: #AE1; 
 
    
 
}

источник

2015-12-05 00:31:12 Riccardo

Удаление места между навигационной панелью и баннером

ответ

Смежные вопросы