未知高度的 CSS 粘性页脚

Question

提问by Loyal Tingley

Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS withoutknowing the size of the footer in advance?

有没有办法在不事先知道页脚大小的情况下使用 CSS 将页脚粘贴到浏览器屏幕的底部或在内容之后（取决于哪个更长）？

Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.

现在我在一个容器中使用绝对定位，该容器包含页脚和容器的最小高度为 100% 的内容，但是如果我更改页脚，我发现我必须更改容器底部的填充以匹配其高度.

Answer 1

回答by Igor Alekseev

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

Summary:

概括：

For a site with a header, content area, and footer:

对于具有页眉、内容区域和页脚的站点：

Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.

放 html, body {height: 100%;}
将您的身体（或包装 div）设置为 display: table; width: 100%; height: 100%;
将页眉、页脚和内容区域设置为display: table-row;。给你的页眉和页脚height: 1px;，并给你的内容区域height: auto;
页眉和页脚都将扩展以适应其内容。内容区域将扩大以适应其较大的内容或可用空间。

https://jsfiddle.net/0cx30dqf/

Answer 2

回答by Luke

If you're willing to jump into the HTML5 future, you can use flexbox...

如果你愿意进入 HTML5 的未来，你可以使用flexbox...

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

main {
   flex: 1;
}

My more detailed answer to the same question: How to make a fluid sticky footer(full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

我对同一问题的更详细回答：如何制作流畅的粘性页脚（完整示例：http: //jsfiddle.net/n5BaR/）
由 flexbox 解决：http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
什么是 MDN 中的 Flexbox：https: //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Answer 3

回答by mateos

Try this!

尝试这个！

Uses Flex!

使用弹性！

NO FIXED HEIGHT, JAVASCRIPT OR TABLES

没有固定的高度、JAVASCRIPT 或桌子

Expands when more content, and when there isn't it sticks to bottom

当更多内容时扩展，当没有时它会粘在底部

Note:Does not work with IE 9 & Below

注意：不适用于 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>

Answer 4

回答by L1zardK1ng

For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom

对于具有响应式页脚（即在调整大小时更改高度）的应用程序，您可以使用 jquery 来动态调整父元素底部的填充。添加到这篇文章：保持页脚在底部

HTML:

HTML：

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

CSS:

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()

Check out the CodePenhere.

在此处查看CodePen。

Answer 5

回答by Abdus Salam

I think the best way is just add a class to your footer. Javascript will do the rest.

我认为最好的方法是在页脚中添加一个类。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>

Answer 6

回答by luki

since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it

由于没有人知道粘性页脚的答案而不知道它的高度，因此使用 css（跨浏览器解决方案），我被迫计算它

jquery:

查询：

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

html structure:

html结构：

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

Answer 7

回答by yvoyer

~~Take a look at this, cssstickyfooter, it works great in any browser.~~

~~看看这个，cssstickyfooter，它适用于任何浏览器。~~

Update: This is from 2010, might not be relevant with current standards

更新：这是从 2010 年开始的，可能与当前标准无关

未知高度的 CSS 粘性页脚

提问by Loyal Tingley

回答by Igor Alekseev

回答by Luke

回答by mateos

回答by L1zardK1ng

回答by Abdus Salam

回答by luki

回答by yvoyer

相关推荐

最近更新

标签

未知高度的 CSS 粘性页脚

提问by Loyal Tingley

回答by Igor Alekseev

回答by Luke

回答by mateos

回答by L1zardK1ng

回答by Abdus Salam

回答by luki

回答by yvoyer

相关推荐

为什么 css 过渡不起作用

CSS 如何在一个css文件中为不同的页面设置不同的正文背景颜色？

CSS 如何在 Twitter Bootstrap 中更改 input 和 textarea 元素的边框/轮廓颜色？

如何使用 CSS 删除类

相关推荐

最近更新

标签