1

高さ100％のdivを修正しました。しかし、スクロールするとフッターが表示されます。フッターが表示されないときに高さを 100% にするにはどうすればよいですか? フッターにスクロールすると上からフッターに移動しますか?

http://jsfiddle.net/9fCfE/ - これは私のコードです。必要 - 固定 div は常に一番上にある必要があり、フッターを覆ってはいけません。

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

（すみません、私の英語はあまり上手ではありません）

4

3 に答える 3

1

あなたはこのようにこれを行うことができます 

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

デモ

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

2 番目のオプションは定義です fixed position

このように

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

デモ-2

于 2013-03-20T05:34:26.357 に答える
0

これが私があなたが望むものに近いと私が信じる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が必要になります。

于 2013-03-20T07:45:04.487 に答える
0

これがあなたが望むものだと思います： 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)
于 2013-03-20T17:16:34.223 に答える