HTML footer/Div positioning

Возможно, это немного простая проблема, но в настоящее время мы пытаемся создать персональный веб-сайт с баннером/заголовком с меню, которое отлично работает, и панель нижнего колонтитула. Оба используют div с «основным» div между основным содержимым. По какой-то причине панель нижнего колонтитула отображается над панелью меню/заголовка, охватывая ее, когда я пытаюсь получить ее ниже основного раздела, и чтобы она оставалась в нижней части страницы.HTML footer/Div positioning

@font-face { 
 
    font-family: "cicle-gordita"; 
 
    src: url("fonts/Cicle_Gordita.ttf") format("truetype"); 
 
    src: url("fonts/Cicle_Gordita.eot") format("opentype"); 
 
} 
 
body { 
 
    left: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    position: relative; 
 
    background-color: #FFFFFF; 
 
} 
 
#banner { 
 
    height: 50px; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    background-color: #000000; 
 
    /*background-image: url("images/menuHor.png");*/ 
 
} 
 
.menuBit { 
 
    height: 40px; 
 
    width: 100px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    float: left; 
 
    margin-left: 10px; 
 
} 
 
.menuContent:hover { 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 
.menuContent { 
 
    font-family: "cicle-gordita"; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    margin-top: 10px; 
 
    color: #ffffff; 
 
} 
 
.main { 
 
    position: fixed; 
 
    margin: 0px; 
 
    margin-top: 50px; 
 
    padding: 0px; 
 
    width: 100%; 
 
    height: 90%; 
 
    background: #ff0000; 
 
    overflow: hidden; 
 
} 
 
#footer { 
 
    width: 100%; 
 
    background: #000000; 
 
    height: 50px; 
 
    position: fixed; 
 
    clear: both; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Personal - Home</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="theme.css"> 
 
</head> 
 

 
<body> 
 
    <div id="banner"> 
 
    <div class="menu"> 
 
     <div class="menuBit"> 
 
     <h2 class="menuContent">HOME</h2> 
 
     </div> 
 
     <div class="menuBit"> 
 
     <h2 class="menuContent">BLOG</h2> 
 
     </div> 
 
     <div class="menuBit"> 
 
     <h2 class="menuContent">WORK</h2> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class='main'> 
 
    <!-- Content Here --> 
 
    </div> 
 
    <div id="footer"></div> 
 
</body> 
 

 
</html>

Как показано на голове, у меня есть JScript/файл Jquery, но все, что содержит небольшой фрагмент кода, чтобы исчезнуть в основной при загрузке страницы, она не что-нибудь изменить.

источник

2016-10-24 Toby King

Я не знаю, если это проблема, но вы устанавливаете высоту '.main' на' 90% ', а остальные фиксированы, я думаю, что сумма высот должна быть' 100% ' – niceman

I 'd предлагать не использовать 'position: fixed;' как на вашем теле, так и на нижнем колонтитуле. Прежде чем погрузиться в это глубже, подумайте о том, чтобы переосмыслить фундамент! – Santi

это не относится к вопросу, но рассмотрим использование семантических элементов html5 для заголовка, нижнего колонтитула, основного – niceman

Добавить bottom: 0; в #footer

По умолчанию top: 0;

источник

2016-10-24 19:02:43 Pat

-2

#footer { 
    position: fixed;   
}

Свойство положение при установке на fixed не сделает пребывание элемента в фиксированном положении, независимо от того, как вы перечисляете, положение, в котором она " фиксированный "определяется top or bottom,left or right.

Если вы хотите, чтобы это положение было «нормально», тогда удалите объект position: fixed и вы установите его.

Если вы хотите, чтобы это было исправлено, вы можете следовать за ответом Пата.

источник

2016-10-24 19:06:32 niceman

ответ

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