Как сделать фиксированный div на основе родительского div - PullRequest
1 голос
/ 14 февраля 2012

Ниже мой дизайн:

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
</head>
<body>
    <div id="wrapper">
        <div id="head">
        </div>
        <div id="content">
            <div id="items">
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                    .....
                </ul>
            </div>
            <div id="items-footer">
                <input type="text"/>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

У меня есть заголовок, тело и нижний колонтитул. В разделе «У меня есть несколько элементов для отображения», а под этими элементами находится нижний колонтитул элементов, содержащий текстовое поле для добавления динамических элементов в этот список. Мое требование - как сделать фиксированный div, который останется внизу (чуть выше нижнего колонтитула), когда пользователь прокручивает элементы. Я хочу, чтобы "items-footer" всегда отображался в окне просмотра.

Ответы [ 2 ]

2 голосов
/ 14 февраля 2012

Описание

Для этого вам не нужно javascript, вы можете сделать это в чистом виде css, используя position:fixed и bottom:0px.

Посмотрите мой образец и эту демонстрацию jsFiddle

Пример

#items-footer {
  position: fixed;
  bottom: 0px;  
}

Дополнительная информация

0 голосов
/ 14 февраля 2012

Вы должны задать элементам div фиксированную высоту, с overflow:auto в CSS.Это включит прокрутку, когда содержимое в div станет больше самого div.поэтому вы прокрутите свой список, но все остальные div'ы останутся на месте, кроме дочерних элементов.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...