Менубар в стиле FB внизу страницы покрывается контентом

Question

Менубар в стиле FB внизу страницы покрывается контентом

0

У меня есть горизонтальная панель меню, прикрепленная к нижней части моей страницы (например, FB имеет панель в верхней части страницы), используя

.bottom_menu {position:absolute; bottom:0px; z-index:100}

Мое основное содержание на странице помещается в поле div, помещенное абсолютно.

.main_content {position:absolute; top:100px; left:75px;right:75px; z-index:100}

Проблема заключается в том, что если у меня есть слишком много строк контента в закладках, он появляется над строкой меню вместо того, толкая его на дно.

Как мне структурировать это так, чтобы меню всегда оставалось в нижней части экрана, скажем, по крайней мере, пару строк ниже последней строки содержимого внутри div main_content?

Спасибо, и извиняюсь заранее, если это очень глупый вопрос! :)

S R 15 нояб. 2013, в 08:51

Источник

Теги:

javascript

html

css

position

menubar

1 ответ

Ещё вопросы

Mohsen Safari · Accepted Answer · 2013-11-15T06-10-00.000Z

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

<div class="container">
    <div class="content">

    </div>
    <ul>
        <li>MENU</li>
        <li>MENU</li>
        <li>MENU</li>
        <li>MENU</li>
    </ul>  
</div>

затем установите положение контейнера relative и положение меню в absolute. установите padding-bottom для контейнера как высоту, как меню, чтобы предотвратить содержимое для покрытия меню.

содержимое увеличит высоту меню контейнера, а нижнее колонтитул будет в нижней части контейнера все время.

вот демонстрация

CSS

 ul, body, htnl{
     padding:0;
    margin:0;
 }
li{
    list-style:none;
    float:left;
    margin-left:10px;
}
div.container{
    position:relative;
    min-height:30px;
    background:#eee;
    padding-bottom:50px;
}
ul{
    position:absolute;
    bottom:0;
    height:50px;
    width:100%;
    background:#aaa;
}