Как предотвратить горизонтальный свиток?

Question

В настоящее время мой код выглядит следующим образом

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #ABA49F; 
 
    font-family: Verdana, Geneva, sans-serif 
 
} 
 
.header_bar { 
 
    width: 100%; 
 
    height: 45px; 
 
    z-index: 1000 !important; 
 
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506); 
 
    height: 22px; 
 
    padding: 7px 40px; 
 
    background-image: linear-gradient(to top, #212121 9%, #181818 100%); 
 
    border-bottom: 2px solid #606060; 
 
} 
 
.header_content { 
 
    width: 50%; 
 
    margin: left; 
 
} 
 
.header_content li { 
 
    list-style: none; 
 
    float: left; 
 
    font-size: 15px; 
 
} 
 
.title li a { 
 
    color: #ffc900 !important; 
 
} 
 
.header_content li a { 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-right: 30px; 
 
} 
 
.header_content a:hover { 
 
    color: #ffc900; 
 
} 
 
.sidebar_frame { 
 
    z-index: 111; 
 
    position:absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    width:50px; 
 
    background:#000; 
 
}

<div class="sidebar_frame">aaaa</div> 
 
<div class="header_bar"> 
 
    <div class="header_content"> 
 
     <div class="title"> 
 
      <li><a href=""><b>Farm</b></a> 
 
      </li> 
 
     </div> 
 
     <li><a href="">New farm</a> 
 
     </li> 
 
     <li><a href="">aaaa</a> 
 
     </li> 
 
     <li><a href="">aaaa</a> 
 
     </li> 
 
    </div> 
 
</div>

Я попытался сделать врезку с высотой 100%. Я понятия не имею, почему боковая панель без z-индекса находится поверх меню, а также почему на горизонтальной оси страницы есть какое-то случайное прокручиваемое пространство?

Снятие боковой панели очищает прокручиваемое пространство.

Answer 1

Боковая панель перекрывает меню, потому что position: absolute элементы are removed from the normal flow of the document. Это означает, что заголовок позиционирует себя без учета боковой панели.

Чтобы исправить перекрытие:

дать left-margin к .header_bar, что одно и то же ширина боковой панели. Это позволяет разместить пространство для боковой панели.

Чтобы исправить скроллинг вопрос:

• Снимите левые и правые отступы от вашего .header_bar и применять его в качестве левого дополнения к .title

• Удалить ширину на 100% от .header_bar

Несколько небольших улучшений:

• Снимите <li> и применить стили непосредственно к элементам через

• удалить или увеличить ширину .header_content

• Удалить margin: left, который не существует

• Место .title a после другого свойства ссылок в CSS. Когда конфликты свойств конфликтуют, последнее объявленное свойство является победителем. This eliminates the need for !important.

• Удалить все свойства z-index; они больше не требуются.

Put, что все вместе, и вы получите этот пример:

body { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-color: #ABA49F; 
 
    font-family: Verdana, Geneva, sans-serif 
 
} 
 
.header_bar { 
 
    height: 45px; 
 
    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.506); 
 
    height: 22px; 
 
    padding: 7px 0; 
 
    background-image: linear-gradient(to top, #212121 9%, #181818 100%); 
 
    border-bottom: 2px solid #606060; 
 
    margin-left: 50px; 
 
} 
 

 
.header_content .title { 
 
    list-style: none; 
 
    float: left; 
 
    font-size: 15px; 
 
    padding-left: 40px; 
 
} 
 
.header_content a { 
 
    text-decoration: none; 
 
    color: white; 
 
    margin-right: 30px; 
 
    float: left; 
 
} 
 
.title a { 
 
    color: #ffc900; 
 
} 
 
.header_content a:hover { 
 
    color: #ffc900; 
 
} 
 
.sidebar_frame { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 50px; 
 
    background: #000; 
 
}

<div class="sidebar_frame">aaaa</div> 
 
    <div class="header_bar"> 
 
    <div class="header_content"> 
 
     <div class="title"> 
 
     <a href=""><b>Farm</b></a>    
 
     </div> 
 
     <a href="">New farm</a>   
 
     <a href="">aaaa</a>   
 
     <a href="">aaaa</a>   
 
    </div> 
 
    </div>

Answer 2

Вот решение проблемы: jsFiddle. Вам необходимо будет удалить горизонтальную прокладку, присвоенную .header_bar, и сменить z-index.sidebar_frame на -1.