具有Ryan Fait代码的动态粘性页脚高度

Question

Ok there are a fair number of questions about Ryan Fait's sticky footer , BUT please don't disregard this question immediately! 好的，关于Ryan Fait的页脚有很多疑问，但是请不要立即忽略这个问题！ What I am trying to do is have a dynamically sized height for my footer and have it stick to the bottom of the page. 我想做的是为页脚设置一个动态大小的高度，并将其固定在页面底部。

Ryan Fait's solution is to wrap all the page content in #wrapper and set #wrapper 's margin-bottom to the height of the footer. Ryan Fait的解决方案是将所有页面内容包装在#wrapper ，并将#wrapper的margin-bottom设置为页脚的高度。 This works very well when hardcoded into the CSS, but I don't know how large my footer is going to be. 当将其硬编码到CSS中时，此方法效果很好，但是我不知道页脚有多大。 Because of this, I want to be able to set #wrapper 's margin-bottom with javascript. 因此，我希望能够使用javascript设置#wrapper的margin-bottom 。 So far, I have been unsuccessful. 到目前为止，我一直没有成功。 Here is my setup. 这是我的设置。

I have been at this so long, I have very little hair to pull out. 我已经呆了这么久了，我的头发很少拉出来。 Do you see where my mistake is? 你看到我的错误在哪里吗？

The Code on JSFiddle JSFiddle上的代码

HTML 的HTML

<body>
    <div id="wrapper">
   Wrapper
    </div> <!-- #wrapper -->

    <footer>
        Footer
    </footer>
</body>

CSS 的CSS

* {
    margin: 0;
    }
html, body {
    height: 100%;
    }
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto; /* Negative margin set with JS */
    }
footer {
    height: 100px;
    }

JQuery jQuery查询

$(window).load(function() {
    set_window_bottom_margin();
});

function set_window_bottom_margin() {
    var margin = $('footer').outerHeight(true);

    $('.wrapper').css('margin-bottom', margin * -1 + 'px');
}

Answer 1

you could do this in css nowdays: 您现在可以在CSS中执行此操作：

html, body {
  height:100%;
  width:100%;
  margin:0;
}
body {
  display:table;
}
main, footer {
  display:table-row;
}
main {height:100%;background:red;}
footer {background:green;}
footer:hover br {display:none;}/* whatever else on footer:hover s for demo purpose */

<main>
  <div>
    main
  </div>
</main>
<footer>
  <div>
    footer<br/>
    footer<br/>
  </div>
</footer>

DEMO http://codepen.io/anon/pen/EvHwk 演示http://codepen.io/anon/pen/EvHwk

具有Ryan Fait代码的动态粘性页脚高度

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-01-17 18:06:22

具有Ryan Fait代码的动态粘性页脚高度

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-01-17 18:06:22

解决方案1
0 已采纳 2014-01-17 18:06:22