固定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%;
}

Demo

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

第二个选项是 define fixed position

就像这样

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

<强> Demo-2

Answer 2

这是一个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。

Answer 3

我想这就是你想要的：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)