CSS Липкие нижние колонтитулы с неизвестной высотой

Есть ли способ привязать нижний колонтитул к нижней части экрана браузера или сразу после содержимого (в зависимости от того, что дольше) с помощью CSS, не зная размер нижнего колонтитула заранее?

Сейчас я использую абсолютное позиционирование в контейнере, в котором нижний колонтитул и содержимое с минимальной высотой контейнера составляют 100%, но если я изменил нижний колонтитул, я обнаружил, что я должен изменить заполнение в нижней части контейнера, чтобы соответствуют его высоте.

Ответ 1

http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/

Резюме:

Для сайта с заголовком, областью содержимого и нижним колонтитулом:

Установить html, body {height: 100%;}
Установите ваше тело (или обертку div) на display: table; width: 100%; height: 100%;
Установите верхний и нижний колонтитулы и область содержимого на display: table-row;. Дайте ваш верхний и нижний колонтитул height: 1px; и укажите область содержимого height: auto;

Верхний и нижний колонтитулы будут расширяться, чтобы соответствовать их контенту. Область содержимого будет расширяться, чтобы соответствовать большему содержанию или доступному пространству.

https://jsfiddle.net/0cx30dqf/

Ответ 2

Если вы хотите окунуться в будущее HTML5, вы можете использовать flexbox...

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
   flex: 1;
}

Мой более подробный ответ на тот же вопрос: как сделать жидкий липкий нижний колонтитул (полный пример: http://jsfiddle.net/n5BaR/)
Решено с помощью flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Что такое Flexbox от MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/F Flexible_boxes

Ответ 3

Попробуйте это!

Использует Flex!

НЕТ ФИКСИРОВАННОЙ ВЫСОТЫ, JAVASCRIPT ИЛИ ТАБЛИЦЫ

Развертывается, когда больше содержимого, а когда нет, он придерживается нижней

Примечание. Не работает с IE 9 и ниже

*{
  margin: 0; 
  padding: 0;
}
html, body{
  height: 100%; 
}
body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
  
}
.content{
  flex: 1;
  background: #ddd;
}

<body>
  <header>
    Header
  </header>
  
  <div class='content'>
    This is the page content
    <br>
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the   body css)
  </div>
  
  <footer>
    Footer
  </footer>
</body>

Ответ 4

так как никто не знает ответа на липкий нижний колонтитул без знания высоты, используя css (решение crosbrowser), я был вынужден вычислить его

JQuery

if( $(document).height() < $(window).height() )
{
    $('#content').height
    (
        $(window).height - $('#footer').height()
    );
}

Структура

html:

<div id="content"></div>
<div id="footer"></div>

Ответ 5

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

//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
    var footerHeight = $('footer.fixed_footer').height();
    if($('footer').hasClass('fixed_footer')){
        $( "section" ).last().css({
            "margin-bottom": footerHeight + 'px'
        });
    }

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', sans-serif;
  line-height: 30px;
}
section{
  padding-top: 80px;
  padding-bottom: 80px;
  border-bottom:1px solid #ddd;
  background: #ffffff;
  z-index: 9;
}
h1{
  font-size: 48px;
  font-weight: 800;
  text-transform: capitalize;
}
a{
  text-decoration: none;
}
.container{
  width: 700px;
  display: inline-block;
  box-sizing:border-box;
  padding-left: 30px;
  padding-right: 30px;
}
.logo{
  height: 80px;
  width: 80px;
  display: inline-block;
}

.footer_top{
  border-bottom: 1px solid #777;
  padding-bottom: 60px;
}
.logo img{
  width: 100%;
  height: 100%;
}
.footer_bottom {}
.footer_bottom p{
  color:#aaa;
}
.footer_top{
  padding-top: 100px;
}
.footer_bottom p a{
  color:#158;
}
footer{
  width: 100%;
  left: 0;
  bottom:0px;
  z-index: -1;
  background: #222222;
}
.fixed_footer{
  width: 100%;
  position:fixed;
  left: 0;
  bottom:0;
  z-index: -99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is About</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Service</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Portfolio</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>
<section>
  <div class="container">
    <h1>This is Banner</h1>
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
    </p>
  </div>
</section>

<footer class="fixed_footer">
  <div class="container">
    <div class="footer_top">
        <a class="logo" href="portfolio.codeexposer.com">
          <img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
        </a>
    </div>
    <div class="footer_bottom">
      <p>
        All Rights Reserved By <a href="http://portfolio.codeexposer.com">Mohammad Abdus Salam</a>
      </p>
    </div>
  </div>
</footer>

Ответ 6

Для приложения с отзывчивым нижним колонтитулом (т.е. Изменяет высоту при изменении размера) вы можете использовать jquery для динамической настройки отступа нижней части для родительского элемента. Добавление на этот пост: держать нижний колонтитул в нижней части

HTML:

<div class="main-container">
   <header>
    this is a header
   </header>
   <section>
    this is content
   </section>
   <footer>
    this is a footer
   </footer>
</div>

CSS:

html,
body {
 height: 100%;
 position: relative;
}
.main-container {
 min-height: 100vh; /* will cover the 100% of viewport */
 overflow: hidden;
 display: block;
 position: relative;
 padding-bottom: 100px; /* height of your footer */
}
footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

CoffeeScript:

footerEventListener = ->
  $(window).on "resize", ->
    setFooterHeight()

setFooterHeight = ->
  // get footer height in px
  bottomPadding = $("footer").css("height")
  $(".main-wrapper").css("padding-bottom", "#{bottomPadding}") 

// init footer events
setFooterHeight()
footerEventListener()

Проверьте CodePen здесь.

Ответ 7

~~Взгляните на это, cssstickyfooter, он прекрасно работает в любом браузере.~~

Обновление: это с 2010 года, может не соответствовать текущим стандартам