Место div внизу страницы с динамическим контентом

Я хочу разместить нижний колонтитул внизу страницы. Проблема в том, что у меня динамический контент, поэтому я не могу работать с «position: fixed;».Место div внизу страницы с динамическим контентом

страница выглядит примерно так:

<body> 
<div id="container"> 
<div id="navbar">...</div> 
<div id="content"></div> 
<div id="footer">...</div> 
</div>

Когда я нажимаю ссылку в навигационной панели, другой контент загружается с AJAX и написано в «содержание» дел. Таким образом, высота страницы изменяется. Нижний колонтитул всегда должен находиться в нижней части экрана, когда нет переполнения содержимого и должно быть внизу страницы, когда содержимое становится слишком длинным. Как я могу это понять?

источник

2013-12-24 Kai Schneider

Check CSS Sticky Footer: http://ryanfait.com/sticky-footer/ – Milanzor

Это не работает вообще. Нижний колонтитул все еще находится под содержимым. –

Возникла проблема с атрибутом «min-height». Я установил высоту тела на 100%. Но когда я устанавливаю минимальную высоту обертки на 100%, ничего не происходит. –

Вы будете хотеть, чтобы проверить «CSS Sticky Footer»: https://css-tricks.com/snippets/css/sticky-footer/ Это решение, которое вы ищете.

источник

2013-12-24 13:36:02 Milanzor

@alex обновила ссылку на статью css-трюки об этом – Milanzor

Yo может использовать эту структуру:

position:absolute; 
bottom:0; 
width:100%; 
height:150px;

и установить

position:Relative

для его родителей.

источник

2013-12-24 11:54:41

Это делает нижний колонтитул посередине страницы. –

Нет, это не правильно, закройте свой firebug, а затем снова проверьте, вы задали позицию относительно своего родителя? –

, когда содержимое переполняется, все отображается правильно. но если содержимое короче экрана, нижний колонтитул встает в середине страницы. я проверил, и все так, как вы предлагали. –

с динамическим содержимым, вы всегда можете использовать это:

sticky-css-footers-the-flexible-way

всегда помогает !! :)

========================================================================================================================= ======================================

EDIT

see this demo

CSS

html, body, #container { 
    height: 100%; 
    margin:0; 
    padding:0; 
} 
body > #container { 
    height: auto; 
    min-height: 100%; 
} 
#footer { 
    clear: both; 
    position: relative; 
    z-index: 10; 
    height: 3em; 
    margin-top: -3em; 
    background-color:grey; 
} 
#content { 
    padding-bottom: 3em; 
}

HTML

<div id="container"> 
    <div id="content"> 

    </div> 
</div> 
<div id="footer">My Dynamic Footer</div>

Примечания: В скрипке, снимите текст комментарий, чтобы увидеть колонтитул растягивая высоту после dynmic содержания высоты !!

Ссылка: Refer here

источник

2013-12-24 11:57:12 NoobEditor

Не для меня. Не имеет никакого эффекта. –

@KaiSchneider: добавлено редактирование ... пожалуйста, проверьте, помогает ли это! – NoobEditor

Место div внизу страницы с динамическим контентом

ответ

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