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

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

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

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

    Резюме:

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

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

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

    https://jsfiddle.net/0cx30dqf/

    Если вы хотите перейти в будущее HTML5, вы можете использовать flexbox

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

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

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

    NO FIXED HEIGHT, JAVASCRIPT ИЛИ TABLES

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

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

     *{ margin: 0; padding: 0; } html, body{ height: 100%; } body{ min-height: 100%; display: flex; flex-direction: column; } .content{ flex: 1; background: #ddd; } 
      
    Header
    This is the page content
    PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
    Footer

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

    JQuery:

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

    Структура html:

     

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

     //This Pen is By Mohammad Abdus Salam //https://stackoverflow.com/questions/4347133/css-sticky-footers-with-unknown-height/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 pa{ 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; } 
      

    This is Banner

    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?

    This is About

    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?

    This is Service

    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?

    This is Portfolio

    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?

    This is Banner

    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?

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

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

    Interesting Posts

    Использование JSON.NET в качестве стандартного JSON-сериализатора в ASP.NET MVC 3 – возможно ли это?

    Установите переменную родительской оболочки из подоболочки

    Автоматическое открытие диалогового windows принтера после загрузки PDF-файла

    Не удалось использовать Windows Search для поиска файла с вопросительным знаком в контенте

    Как читать с ресурса версии в Visual C ++

    Представления, наложенные выше YouTubePlayerFragment или YouTubePlayerView в иерархии компоновки, приводят к тому, что воспроизведение приостанавливается немедленно

    Hostdomonster Subdomain перенаправляется на домашний сервер IP: как ssh на домашний сервер с использованием субдомена

    Почему все поля в интерфейсе неявно статичны и окончательны?

    Какой инструмент я могу использовать для копирования DVD-фильмов?

    Как запретить пользователю вводить текст в textarea после достижения максимального предела персонажа

    dispatch_once после изменения API Swift 3 GCD

    Swift: переместите ярлык UITableViewCell на новый ViewController

    Добавление разрывов строк к строкам, которые входят в буфер обмена

    Как использовать сервер времени Интернета для получения времени?

    Определены ли результаты поразрядных операций с целыми знаками?

    Давайте будем гением компьютера.