Проблискуючи нижній колонтитул в нижній частині сторінки, щебетати на Twitter

306

Я, як правило, знайомий з технікою розмивання нижнього колонтитула за допомогою css.

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

css  twitter-bootstrap  footer 
— Кальвін Ченг
джерело
Перш ніж перевірити всі відповіді нижче, пам’ятайте, що ОП хоче, щоб він працював з twitter bootstrap.За це не обов’язково, завантажувальний засіб twitter працює з Jquery, що означає, що він увімкнено Javascript. З цієї причини просто протестуйте мою відповідь: stackoverflow.com / питання / 10099422 /…
— HenryW
4
Офіційний приклад: getbootstrap.com/examples/sticky-footer-navbar/…
— користувач
1
Посилання розірвано! Чи може хто-небудь, будь-ласка, виправити офіційний приклад посилання?
— PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar в майбутньому це може стати старшою версією через 4.0 я гадаю.
— Аммад Халід

Відповіді:

323

Знайдені тут фрагменти дуже добре працюють для завантажувальної програми

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}
— Чуань Йонг
джерело
Це найкраще рішення, яке я намагався поки що. Прийняв це як відповідь.
— Келвін Ченг
Привіт, я реалізую цей метод, він чудово працює, але тепер у мене виникли проблеми з відображенням сторінки на iphone (сторінка збільшена). Будь-які ідеї, в чому проблема? Ось деякі подробиці: stackoverflow.com/questions/18621090 / ...
— pupadupa
94
На
— всякий
4
— HenryW
1
Це найкращий метод, який я знайшов для Bootstrap. Для чутливості пристрою не забудьте використовувати медіа-запити для оновлення висоти #main та .footer для різних розмірів екрана
— SyntaxGoonoo
466

Це тепер включено до Bootstrap 2.2.1.

Запуск 3.x

Використовуйте компонент navbar і додайте .navbar-fixed-bottomклас:

<div class="navbar navbar-fixed-bottom"></div>

Запуск 4.x

<div class="navbar fixed-bottom"></div>

Не забудьте додати body { padding-bottom: 70px; }або в іншому випадку вміст сторінки може висвітлюватися.

Документи: http://getbootstrap.com/components/#navbar-fixed-bottom

— сан
джерело
35
@ChuanYeong На жаль, немає navbar-static-bottom.
— Лоуренс Вудман
25
@MikeCurry він запитав не про фіксований нижній колонтитул, а про той, який "заповнює" порожній простір, якщо у вашої сторінки недостатньо вмісту, щоб колонтитул залишався внизу. Якщо колонтитул лише інформаційний, фіксований займає лише цінний простір.
— rdlu
22
Це не липкий колонтитул, тому що він використовується позицією: фіксований; що не вірно
— Furkat U.
9
Так, це рішення видається лише в нижній частині вікна перегляду, а не в нижній частині сторінки. тобто колонтитул завжди видно
— rism
3
Довелося спростувати відповідь, оскільки це викликає плутанину. ОП не хоче липкого підніжжя.
— HenryW
77

Робочий приклад для завантажувального пристрою Twitter NOT STICKY FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Версія, яка завжди оновлюється у випадку, якщо користувач відкриє вікно devtools або змінює розмір.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

Вам потрібен принаймні елемент із символом a #footer

Коли не хочеться, щоб смуга прокрутки, якщо вміст підходить до екрану, просто змініть значення 10 на 0
Панель прокрутки з’явиться, якщо вміст не підходить до екрана.

— ГенріВ
джерело
9
Так, я пішов і з цим. CSS іноді може бути таким дурним. Не те, що це неможливо, але рішення загального призначення можуть бути важкими для вирішення, і виправлення таких дратівливих речей у наших макетах не повинно здійснювати поїздки на обмін стеками, багаторазові перегляди суті, тестування між веб-переглядачами та можливу здачу простого JS хитрість. Так, я відчуваю себе трохи брудною, але принаймні це працює.
— meecect
3
кожне окреме рішення, яке я переглянув, є неправильним. Це ТІЛЬКИ, який насправді робить те, що він повинен робити - приклеювати нижній колонтитул внизу сторінки, не затушовуючи жодного вмісту, якщо розмір браузера не змінюється.
— Дейв
13
це не працювало тихо, як і очікувалося для мене, все ж, одна з кращих відповідей, я виправив свою проблему, замінивши $('#footer').height();на$('#footer').outerHeight();
— DarkMukke
3
Чудова відповідь! У мене було кілька адаптацій, які, на мою думку, покращують тут: stackoverflow.com/a/36385654/8207
— Cory
6
Найкраща відповідь, яку я знайшов. Якщо ви хочете, щоб він працював після зміни розміру вікна, просто покладіть основний код з відповіді всередину $(window).resize(function() {//main code goes here});та попросіть $(window).resize();його встановити при завантаженні сторінки.
— Szymon Sadło
36

Ось як це реалізувати на офіційній сторінці:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Я просто перевірив це зараз, і це працює ВЕЛИКОБІЛЬНО! :)

HTML

<body>

    <!-- Part 1: Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
      </div>

      <div id="push"></div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Відповідний код CSS такий:

/* Sticky footer styles
-------------------------------------------------- */
html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}
— Леніел Маккаферрі
джерело
7
Дякую за повідомлення про це, це було, безумовно, найкращим рішенням (не кажучи вже про єдине, що працювало) для мого конкретного проекту, і, звичайно, приємно, що це безпосередньо від самого проекту.
— Cory W.
1
Я не знаю, у чому полягає угода, але я не зміг змусити її працювати, не додавши прокрутки до сторінок. Я змінив .wrapper CSS, тому мінімальна висота була "calc (100% - 120px)", де 120px - це висота мого нижнього колонтитулу, і видалив <div id = "push"> </div> з html оскільки, здавалося, нічого не робив окрім додавання висоти до сторінки, яка мені не потрібна.
— jammyman34
36

Для Sticky Footer ми використовуємо два DIV'sв HTML для основного ефекту липкого колонтитулу . Напишіть так:

HTML

<div class="container"></div>

<div class="footer"></div>

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}
— пісок
джерело
7
Він сказав, що використовує Twitter Bootstrap. Який був би найпростіший спосіб інтегрувати це в Bootstrap, не повністю переписуючи HTML?
— Коді Грей
1
Якщо ОП хочуть досягти ефекту Sticky Footer, він повинен змінити свій MarkUp
— неділю
Дякую! Це єдиний метод, який фактично працював для мене на сайті ASP.NET MVC5, який використовує Bootstrap. +1
— Ян Дюран
19

Ну я знайшов суміш navbar-innerі navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

Здається, це добре і працює для мене

введіть тут опис зображення

Дивіться приклад в Fiddle

— Максим Шустін
джерело
2
найпростіше і найелегантніше рішення. Будьте хитрі до домашнього пивоваріння власного коду css, оскільки він не буде сумісним із завантаженням
— 1-14x0r
Я використав це, і у мене сталася проблема зі старим андроїдом (можливо, Froy?) Зі сторінками, які були коротшими за екран. В іншому випадку він добре працював на FF, Chrome, IE11, iPhone, nexus 7.
— bnieland
Ідеально і надзвичайно просто!
— ramires.cabral
18

В останній версії bootstrap 4.3 це можна зробити за допомогою .fixed-bottomкласу. 

<div class="fixed-bottom"></div>

Ось як я його використовую з підніжком: 

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Ви можете знайти більше інформації в документації про позицію тут .

— Мохамед Алі ДЖАМАУІ
джерело
1
Це все ще працює з офіційною 4-річною версією.
— klewis
Зауважте, що приклад на getbootstrap.com/docs/4.1/examples/sticky-footer має стиль висоти лінії = 60 пікселів для елемента нижнього колонтитула. Це не тільки непотрібно, але також заважає футеру працювати належним чином, якщо це батьківський елемент одного або декількох елементів діва, що зазвичай буває.
— ScottyB
13

Відповідь Генріва хороша, хоча мені знадобилося кілька налаштувань, щоб я працював так, як я хотів. Зокрема, також обробляється наступне:

  • Уникнення «стрибкості» при завантаженні сторінки, спочатку позначивши невидимкою та встановивши видиме в JavaScript
  • Робота з браузером змінюється витончено
  • Додатково встановіть резервну копію сторінки нижнього колонтитула, якщо браузера зменшиться, а колонтитул стане більшим за сторінку
  • Підвищення функції висоти

Ось що для мене спрацювало з цими твіками:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});
— Кори
джерело
11

Це працювало для мене чудово.

Додайте цей клас навбар з фіксованим дном у колонтитул.

<div class="footer navbar-fixed-bottom">

Я використовував це так:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

І він встановлюється вниз по всій ширині.

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

— sp_omer
джерело
10

Вам потрібно обернути свій .container-fluiddiv для того, щоб ваш липкий колонтитул працював, також вам не вистачає деяких властивостей у вашому .wrapperкласі. Спробуйте це:

Видаліть тег padding-top:70pxзі свого bodyтегу та додайте його до свого .container-fluid, наприклад:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Ми повинні це зробити, тому що натискання bodyвниз, щоб пристосувати кінчики навбар, підштовхує колонтитул трохи далі (на 70 пікселів далі) повз вікно перегляду, тому ми отримуємо смугу прокрутки. Ми отримуємо кращі результати, натискаючи .container-fluidнатомість.

Далі ми маємо вийняти .wrapperклас поза вашим .container-fluidдівом та обгорнути його своїм #mainподільником так:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Ваш нижній колонтитул, звичайно, повинен бути поза .wrapperдівом, тому видаліть його з `.wrapper div та розмістіть його назовні, як-от так:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

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

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

І це повинно працювати, хоча вам, мабуть, доведеться змінити кілька інших речей, щоб змусити його працювати при зміні розміру екрана, як, наприклад, скидання висоти в .wrapperкласі, як-от так:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}
— Андрес Ілліч
джерело
9

Це правильний спосіб зробити це за допомогою Twitter Bootstrap і нового класу navbar-fix-bottom: (ви не маєте уявлення, скільки часу я витратив на це)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
— Регіс Б.
джерело
9

Використовуйте гнучкі утиліти, вбудовані в Bootstrap 4! Ось що я придумав, використовуючи в основному утиліти Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh;">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex щоб зробити головний діг гнучким контейнером
  • .flex-column на головному діві, щоб розташувати свої гнучкі елементи в стовпці
  • min-height: 100vh до головного div, або з атрибутом стилю, або у вашому CSS, щоб заповнити вікно перегляду вертикально
  • .flex-grow-1 на контейнері елемент, який повинен містити основний контейнер вмісту, займає весь простір, який залишається на висоті вікна перегляду.
— EGhost57
джерело
Замість того , щоб min-height: 100vhв min-vh-100класі з Bootstrap можна використовувати.
— ikonuk
Це рішення спрацювало чудово, включаючи пропозицію min-vh-100 від @ikonuk
— TGR
3

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

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

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

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }
— 1-14х0р
джерело
3

Ви можете використовувати jQuery для цього:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});
— DucCuong
джерело
2

Єдиний, хто працював на мене!

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}
— Рікардо
джерело
2

Найпростіша методика - це, ймовірно, використання Bootstrap navbar-static-bottomу поєднанні з встановленням основного поділу контейнера height: 100vh(новий відсоток порту CSS3 перегляду ). Це сповнить нижній колонтитул донизу.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>
— Пан Вангперавонг
джерело
2

Тестували с Bootstrap 3.6.6 .

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}
— Душан Маяр
джерело
1 
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Висота нижнього колонтитулу відповідає розміру нижнього відступу елемента обгортання.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}
— Різкий512
джерело
1

Ось рішення для новітньої версії Bootstrap (4,3 під час написання) за допомогою Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

І приклад кодексу: https://codepen.io/tillytoby/pen/QPdomR

— Том Т
джерело
1

На прикладі Bootstrap 4.3 , якщо ви втрачаєте розум, як я, це дійсно працює:

  • Усі батьки діла нижнього колонтитулу повинні мати height: 100%( h-100клас)
  • Прямий батько нижнього колонтитула повинен мати display: flex( d-flexклас)
  • Футбол повинен мати margin-top: auto( mt-autoклас)

Проблема полягає в тому, що в сучасних фасадних рамах у нас часто є додаткові обгортки навколо цих елементів.

Наприклад, у моєму випадку за допомогою Angular я склав подання з окремого кореня програми, основного компонента додатка та компонента нижнього колонтитула - усе це додало свій спеціальний елемент у DOM.

Отже, щоб це працювало, мені довелося додати класи до цих елементів обгортки: додатковий h-100, переміщення d-flexодного рівня вниз та переміщення mt-autoодного рівня вгору від нижнього колонтитула (тому насправді це вже не в класі нижнього колонтитулу, а на моєму <app-footer>власному користувальницькому рівні елемент).

— MrValueType
джерело
Я повинен був помістити class="h-100"в <html>тезі теж.
— Кел
1

Використовуйте цей фрагмент коду в завантажувальному інструменті, який працює

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
— санджай
джерело
1

Bootstrap v4 + рішення

Ось рішення, яке не потребує переосмислення структури HTML або будь-якої додаткової хитрості CSS, пов’язаної із прокладкою:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

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

Чому це працює

  • style="height:100%;" робить <html> тег зайняти весь простір документа.
  • d-flexнабори класів display:flexдо нашого<body> тегу.
  • flex-columnнабори класів flex-direction:columnдо нашого <body>тегу. Його діти ( <header>, <main>,<footer> і будь-який інший прямий дитина) тепер вирівняні по вертикалі.
  • клас h-100встановлює height:100%наш <body>тег, тобто він буде охоплювати весь екран вертикально.
  • клас flex-grow-1задає flex-grow:1наш <main>, ефективно доручаючи йому заповнювати будь-який залишився вертикальний простір, таким чином, досягаючи 100% вертикальної висоти, яку ми встановили раніше на своєму <body>тезі.

Робоча демонстрація тут: https://codepen.io/maxencemaire/pen/VwvyRQB

Дивіться https://css-tricks.com/snippets/css/a-guide-to-flexbox/ для отримання додаткової інформації про flexbox.

— Катрандракс
джерело
h-100клас не працює належним чином, краще використовувати min-vh-100.
— ikonuk
@ikonuk Що саме ви маєте на увазі під "не працює належним чином"? Будь ласка, докладно.
— Kathandrax
Оскільки h-100клас завжди залежить від висоти батьківських елементів і може не працювати в деяких випадках належним чином. Оскільки ми хочемо, щоб колонтитул знаходився внизу вікна перегляду, було б хорошою практикою використовувати висоту вікна перегляду.
— ikonuk
Знову ж таки визначте "деякі випадки". Ваш аргумент про батьківську залежність стосується саме того ж min-width. Ось чому HTMLтег містить height100% у коді. Цей приклад працює, і я не бачу, чому він не надав б крос-браузерній підтримці heightвластивості CSS , що в кінцевому підсумку перетворює фрагмент Bootstrap.
— Kathandrax
Я не сказав, що ваш приклад не працює. Не кожен використовує стиль у HTMLтезі. У моєму випадку ваше рішення не спрацювало, оскільки я не вважаю за краще використовувати стиль у HTMLтезі. І я не хочу, щоб bodyтег залежить від іншого батьківського, але вікна перегляду. Не потрібно ставити style="height:100%;"і h-100одночасно. Примітка min-vh-100до тіла просто виконує роботу і менше кодує.
— ikonuk
0

Схоже, height:100%"ланцюжок" розривається на div#main. Спробуйте додати height:100%його, і це може наблизити вас до своєї мети.

— мізки911
джерело
0

Тут ви знайдете підхід у HAML ( http://haml.info ) з навігацією вгорі та підніжком у нижній частині сторінки:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER
— Ганнес
джерело
Не могли б ви детальніше розібратися у своїй відповіді? Відповіді, що стосуються лише коду, як правило, не рекомендуються.
— Qix - МОНІКА ПОМИЛИЛА
1
Гаразд, що ти хочеш знати?
— Ганнес
Мені це не потрібно знати, але хтось, який приходить на цей сайт пізніше, може точно не знати, чому код вашої відповіді робить те, що робить.
— Qix - МОНІКА ПОМИЛИЛА
Напевно, я повинен її видалити. Я написав нове вступ. :)
— Ханнес
0

Не ускладнювати.

footer {
  bottom: 0;
  position: absolute;
}

Вам може знадобитися також компенсувати висоту нижнього колонтитула, додавши margin-bottomеквівалент висоті нижнього колонтитулу до body.

— обфк
джерело
0

Ось приклад використання css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

скрипка

— Віктор
джерело
0

інше можливе рішення - просто використання медіа-запитів

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
— GeorgeWL
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.