high div breaks sticky footer

Question

Я работаю над сайтом с липким нижним колонтитулом. Недавно я добавил в навигацию функцию предварительного просмотра корзины покупок. В основном при наведении мыши открывается div, чтобы отображать элементы внутри корзины покупок. На самом деле ничего особенного.

Проблема возникает, когда список предметов становится очень длинным. Разделение, содержащее элементы, как-то ломает липкий нижний колонтитул.

Чтобы продемонстрировать поведение, я сделал jsFiddle example.

Мой HTML выглядит следующим образом:

<div id = "main"> 
    <div id = "navigation"> 
     navigation 
     <div id = "cart"> 
      cart 
      <div id = "cartItems"> 
       <p>item 1</p> 
       <p>item 2</p> 
       <p>item 3</p> 
       <p>...</p> 
      </div> 
     </div> 
    </div> 
    <div id = "content">content</div> 
    <div id = "footer">footer</div> 
</div> 

CSS:

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height: 100%; 
} 

#main { 
    width: 900px; 
    min-height: 100%; 
    margin: 0 auto; 
    position: relative; 
    background-color: lightpink; 
} 

#navigation { 
    height: 50px; 
    position: relative; 
    background-color: orange; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
    width: 900px; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
    background-color: yellowgreen; 
} 

#cart { 
    width: 100px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background-color: red; 
} 

#cartItems { 
    display: none; 
} 

Я надеюсь, что кто-то может дать мне подсказку. Я действительно застрял на этом.

Answer 1

У вас есть несколько вариантов здесь. Выбор за вами

1. Добавить высокий Z-индекс опции панели и сделать его, чтобы показать верхнюю часть нижнего колонтитула (не хороший, потому что, если элемент списка слишком долго, то он будет идти вниз за пределы нижнего колонтитула а после нижнего колонтитула будет показана пустая область).

2. Добавить overflow:scroll в main DIV и позволяет элемент списка тонуть к содержанию (не хорошо, если он тонет, то пользователь не может видеть содержимое).

3. Укажите максимальную высоту список элементов и сделать overflow:scrool (Выход нормально, но пользователю нужен приборами типа СПИРАЛЬНОГО по пути вниз)

4. Сделать список элементов нескольких столбцов и установить некоторую максимальную высоту для элемента списка (Я думаю, что этот метод является приемлемым) (посмотрите на магазин левой стороны амазонки по меню отдела).

5. Используйте JqueryUI в соответствии с инструкцией по сокращению и категоризации списка товаров (неплохо, но у вас есть некоторые работы). http://jqueryui.com/accordion/

Answer 2

Вот обновленный jsfiddle, что делает тележку идти по сноске - увидеть, если это то, что вы ищете:

http://jsfiddle.net/PMabQ/20/

CSS: позиция

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height: 100%; 
} 

#main { 
    width: 900px; 
    min-height: 100%; 
    margin: 0 auto; 
    position: relative; 
    background-color: lightpink; 
} 

#navigation { 
    height: 50px; 
    position: relative; 
    background-color: orange; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
    width: 900px; 
    height: 50px; 
    position: fixed; 
    bottom: 0; 
    background-color: yellowgreen; 
    z-index: 1; 
} 

#cart { 
    width: 100px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    background-color: red; 
    z-index: 2; 
} 

#cartItems { 
    display: none; 
} 

Answer 3

Изменить FOOTER к fixed

Answer 4

Удалить position:absolute с #cart и использовать float:right

И добавьте overflow:auto в #main, чтобы увеличить его в соответствии с позициями корзины.

* { 
    margin:0; 
    padding:0; 
} 

html, body { 
    height: 100%; 
} 

#main { 
    width: 900px; 
    min-height: 100%; 
    margin: 0 auto; 
    position: relative; 
    background-color: lightpink; 
    overflow:auto 
} 

#navigation { 
    height: 50px; 
    position: relative; 
    background-color: orange; 
} 

#content { 
    padding-bottom: 50px; 
} 

#footer { 
width: 900px; 
height: 50px; 
position: absolute; 
bottom: 0; 
background-color: yellowgreen; 

}

#cart { 
    width: 100px; 
    float:right; 
    background-color: red; 
} 

#cartItems { 
    display: none; 
} 

DEMO

Answer 5

Изменение переполнения вашего #main DIV:

overflow-x: hidden; 
overflow-y: auto; 

Не помещайте колонтитул в ваш #main DIV

И это дает, что:

http://jsfiddle.net/PMabQ/27/