Нехай весь час залишається внизу вмісту сторінки, навіть коли є смуги прокрутки

261

Будь ласка , подивіться на це посилання, я хочу навпаки: Коли зміст перетікає в скролінгу, я хочу , щоб мій колонтитули бути завжди в повній нижній частині сторінки, як переповнення стека.

У мене є діва з id="footer"цим CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

Але все, що потрібно зробити - це перейти до нижньої частини вікна перегляду, і залишиться там, навіть якщо прокрутити вниз, тому його вже не внизу.

Зображення: Приклад

Вибачте, якщо не з'ясовано, я не хочу, щоб це було виправлено, лише для того, щоб він знаходився внизу всього вмісту.

— H Bellamy
джерело

1

спробуйте position:fixed, хоча це буде не найкращим способом зробити це

— redDevil

Спробуйте положення: відносно тіла.

1

ви не закрили свого; після позиції: абсолютна. це працювало б ідеально інакше!

— AlexHighHigh

545

Це саме те, що position: fixedбуло розроблено для:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

Ось загадка: http://jsfiddle.net/uw8f9/

— Джозеф Сільбер
джерело

65

Це рішення не є корисним для 90% випадків. якщо ви зміните розмір вікна, ваш нижній колонтитул накладе інший вміст і не зупиниться в кінці вашого вмісту

— vsync

10

@aroth це тому, що це два абсолютно різних рішення. Це рішення буде тримати нижній колонтитул внизу візуальної області екрана. Альтернативне рішення зберігає колонтитул або в нижній частині екрана, або в нижній частині сторінки, залежно від того, який розмір є більшим - про що запитував запитувач.

— Моя голова болить

6

@MyHeadHurts - Ви абсолютно праві. Після відповіді я зрозумів, що це не те, чого хотів ОП, але залишив його тут для людей, які шукають простий колонтитул. З коментарів (і голосів) здається, що багато людей борються з цією елементарною функцією CSS.

— Джозеф Сільбер

1

@MyHeadHurts - Досить справедливо, хоча на мої гроші вони обидва в основному однакові. Вміст прокручується під fixedколонтитулом, коли для цього достатньо вмісту. Це досить добре для мене. Звичайно, я можу бачити, як дуже великі колонтитули, як, наприклад, те, що вони мають у stackoverflow, не будуть добре працювати з fixedпідходом, але для базового однолінійного колонтитулу цей підхід добре працює на мою думку.

— aroth

@aroth Я згоден, це хороше рішення, і все залежить від того, що ви хочете. Я тільки вказував, чому одне рішення було складніше, ніж інше -> вони не роблять те саме.

— Моя голова болить

187

На жаль, ви не можете цього зробити, додавши трохи додаткового HTML-коду, а один фрагмент CSS покладається на інший.

HTML

Перш за все , необхідно обгорнути header, footerі #bodyв #holderDIV:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

CSS

Потім встановіть height: 100%на htmlі body(фактичне тіло, а не ваші #bodyсправи) , щоб гарантувати , що Ви можете встановити мінімальну висоту у відсотках від дочірніх елементів.

Тепер встановіть min-height: 100%на #holderdiv, щоб він заповнив вміст екрана і використовуйте position: absoluteдля того, щоб сидіти нижній колонтитул у нижній частині #holderdiv.

На жаль, вам потрібно застосувати padding-bottomдо #bodyдіву, який має ту саму висоту, що і footerдля того, щоб переконатися, що footerзначення не знаходиться над будь-яким вмістом:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

Приклад роботи, короткий корпус: http://jsfiddle.net/ELUGc/

Приклад роботи, довге тіло: http://jsfiddle.net/ELUGc/1/

— У мене болить голова
джерело

я не можу отримати, чому ширина: 100%; потрібно

— Сомнат Харат

4

@sTACKoVERFLOW - Якщо ви не вказуєте a width або обидва, left і rightтоді встановлюються значення, autoі елемент завернеться, щоб відповідати його вмісту. Вказівка width: 100% або left: 0 і right:0гарантує , що абсолютно позиціонується елемент займає всю ширину елемента контейнера

— My Head Hurts

Я шукав подібну поведінку, але в моєму випадку #body div плаває, кажучи "float: left". Приклад короткого тіла працює, але приклад довгого тіла - ні. Будь-які пропозиції, як я можу отримати бажану поведінку за допомогою float на #body div.

— Ятін

@Ian сказав у відповідь, оскільки у нього не вистачало респондентів, щоб коментувати: Якщо у вас проблеми на asp.net з відповіддю з "My Head Hurts" - вам потрібно додати "висоту: 100%" до основної згенерований тег FORM, а також теги HTML та BODY для того, щоб це працювало.

— msouth

Якщо ви намагаєтеся , щоб отримати цю роботу всередині DIV , а не всередині всього тіла, переконайтеся , що ви вказали height=100%на всі ваші містять елементи, включаючи <form>елементи.

— Бен Кейн

13

Щойно розроблено для іншого рішення, як у наведеному вище прикладі, є помилка (десь помилка) для мене. Варіація від обраної відповіді.

html,body {
    height: 100%
}

#nonFooter {
    min-height: 100%;
    position:relative;
    /* Firefox */
    min-height: -moz-calc(100% - 30px);
    /* WebKit */
    min-height: -webkit-calc(100% - 30px);
    /* Opera */
    min-height: -o-calc(100% - 30px);
    /* Standard */
    min-height: calc(100% - 30px);
}

#footer {
    height:30px;
    margin: 0;
    clear: both;
    width:100%;
    position: relative;
}

для html макета

<body>
    <div id="nonFooter">header,middle,left,right,etc</div>
    <div id="footer"></div>
</body>

Добре, що цей спосіб не підтримує старий браузер, однак для старого браузера прийнятно прокручувати 30 пікс

плунжер

— Анонімний
джерело

5

Я розумію, що це говорить не використовувати це для "відповіді на інші відповіді", але, на жаль, у мене недостатньо респондентів, щоб додати коментар до відповідної відповіді (!), Але ...

Якщо у вас є проблеми на asp.net з відповіддю "Моя голова болить" - вам потрібно додати "висоту: 100%" до основного генерованого тегу FORM, а також теги HTML та BODY, щоб це працювало.

— Ян
джерело

4

Ви не закрили свою; після позиції: абсолютна. Інакше ваш вищезгаданий код спрацював би ідеально!

#footer {
   position:absolute;
   bottom:30px;
   width:100%;
}

— AlexHighHigh
джерело

3

Я б прокоментував, якби міг, але досі не маю дозволів, тому я опублікую підказку як відповідь, щодо несподіваної поведінки на деяких пристроях Android:

Позиція: Фіксований працює лише в Android 2.1 через 2.3, використовуючи наступний метатег:

<meta name="viewport" content="width=device-width, user-scalable=no">.

див. http://caniuse.com/#search=position

— Тарчісо-молодший
джерело

2

Це інтуїтивне рішення з використанням команди viewport, яка просто встановлює мінімальну висоту на висоту вікна перегляду мінус висоту нижнього колонтитулу.

html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}

#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}

— Оброміос
джерело

1

Я вирішив подібну проблему, помістивши весь основний вміст у додатковий тег div (id = "зовнішній"). Потім я перемістив тег div з id = "footer" поза цим останнім "зовнішнім" тегом div. Я використовував CSS для визначення висоти "зовнішнього" та вказав ширину та висоту "нижнього колонтитулу". Я також використовував CSS для визначення поля "ліворуч" та "праворуч" в області "нижнього колонтитулу" як автоматичного. Як результат, нижній колонтитул міцно сидить у нижній частині моєї сторінки і прокручується зі сторінкою (хоча, вона все ще з’являється всередині «зовнішнього» діва, але, на щастя, поза головним «вмістом»), що здається дивним, але це де я цього хочу).

— Девід Б
джерело

1

Я просто хочу додати - більшість інших відповідей спрацювали мені добре; однак пройшло багато часу, щоб вони працювали!

Це тому, що налаштування height: 100%лише набирає висоту батьківського діва!

Отже, якщо весь ваш html (всередині тіла) виглядає наступним чином:

<div id="holder">
    <header>.....</header>
    <div id="body">....</div>
    <footer>....</footer>
</div>

Тоді буде добре:

html,body{
    height: 100%
}

#holder{
    min-height: 100%;
    position:relative;
}

#body{
    padding-bottom: 100px;    /* height of footer */
}

footer{
    height: 100px; 
    width:100%;
    position: absolute;
    left: 0;
    bottom: 0; 
}

... оскільки "тримач" підбере висоту прямо від "тіла".

Кудо моїй голові болить, відповідь на яку я закінчила приступати до роботи!

Однак. Якщо ваш html більше вкладений (оскільки це лише елемент повної сторінки, або він знаходиться в певному стовпці тощо), тоді вам потрібно переконатися, що кожен елемент, що містить, також height: 100%встановлений у діві. В іншому випадку інформація про висоту буде втрачена між "корпусом" і "тримачем".

Наприклад, наступне, де я додав клас "повний зріст" до кожного діва, щоб переконатися, що висота повністю знижується до наших елементів заголовка / тіла / футера:

<div class="full-height">
    <div class="container full-height">
        <div id="holder">
            <header>.....</header>
            <div id="body">....</div>
            <footer>....</footer>
        </div>
    </div>
</div>

І не забудьте встановити висоту на повнорозмірний клас у css:

#full-height{
    height: 100%;
}

Це вирішило мої проблеми!

— Тім Л
джерело

0

якщо у вас є колонтитул фіксованої висоти (наприклад, 712px), ви можете зробити це з js таким чином:

var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
    bgTop = winHeight - 712;
    document.getElementById("bg").style.marginTop = bgTop+"px";
}

— Джордж Карлін
джерело

0

position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;

— Правен Кунду
джерело

Опишіть, будь ласка, у своїй відповіді, у чому проблема, і як цей фрагмент вирішить її, щоб допомогти іншим зрозуміти цю відповідь

— FZs

-2

використовувати клас завантаження з фіксованим дном

<div id="footer" class="fixed-bottom w-100">

— Гоутем Соорарай
джерело

Немає вказівки, що OP використовує Bootstrap.

— TylerH