jquery - 固定 div 100%

Question

我已经固定了 100% 高度的 div。但是当我滚动时，我想看到页脚。当我看不到页脚时，如何在滚动到页脚时将其高度设置为 100%？

http://jsfiddle.net/9fCfE/ - 这是我的代码。我需要 - 固定的 div 必须始终位于顶部，并且不应覆盖页脚。

    .fixed {
    width: inherit;
    height: 95%;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    }
    footer {
    width: 100%;
    }

（对不起，我的英语不太好）

Answer 1

你可以这样做

html, body{
height:100%;
}
.wraper{
background:red;
  min-height:100%;
}

演示

-----------------

第二个选项是定义 fixed position

像这样

.wraper{
background:red;
position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;overflow:scroll;
}

演示-2

Answer 2

我想这就是你想要的：http: //jsfiddle.net/pavloschris/9fCfE/8/

轻微的 CSS 变化：

.fixed {
    background: red;
    width: inherit;
    /*  height: 95%;*/
    top:0;
    bottom:5%;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
}

和JS：

var $window = $(window);
var $footer = $('footer');
var $fixed = $('.fixed');

function adjustHeight() {
    var wHeight = $window.height() + 0;
    var originalBottom = wHeight * .05;

    var bottom = wHeight - ($footer.offset().top - $window.scrollTop() + 0);

    bottom = Math.max(originalBottom, bottom);
    $fixed.css({
            'bottom': bottom
    });

};

$(window).scroll(adjustHeight)

Answer 3

这是一个我相信接近你想要的css演示。

HTML：

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

CSS：

* {
    margin:0;
     padding: 0;
}
html,body{
    height: 100%;
}
body {
    padding: 0 0 150px 0;
}
footer {
    height: 150px;
    background: blue;
}

.content{
    height:100%;
    background:red;
}

演示：http: //jsfiddle.net/pavloschris/DPhaJ/

否则，如果您想在滚动时更改 html 和/或样式，则需要 JavaScript。