0

子divを、「divウィンドウ」に対して親divの下部に固定して配置しようとしています。つまり、ユーザーがスクロールするかどうかに関係なく、子divをdivの下部に固定したままにします。

コンテンツのオーバーフローがない場合、次を使用してこの目標を達成できます。

HTML：

<div id="outer">
    <div id="inner"></div>
</div>

CSS：

#outer {
    position: relative;
    overflow-y: scroll;
    color: red;
}

#inner {
    bottom: 0;
    position: absolute;
    color: blue;
}

結果は次のとおりです。

問題のない画像

コンテンツが#outerオーバーフローしてユーザーがスクロールすると、問題が発生します。

休憩を使用したオーバーフロー

JS Fiddle of Image＃2（を使用したオーバーフロー<br>）。

ここに私の問題があります：スクロールに関係なく、（#inner青いボックス）を（赤いボックス）の下部に固定したままにしておきます-を持っているdivで#outer使用するのと同様の効果です。しかし、100％ではない高さが設定されているdivを使用して効果を実現したいと思います。position:fixedheight:100%

これには非常に簡単な解決策があるように感じますが、私には理解できません。

4

2 に答える 2

1

2番目のアウターを追加すると、 divが静的に配置されている場合、<div>スクロールの代わりにその要素内に絶対的に配置できます：http: //jsfiddle.net/Kgf8a/1/<div>#outter

position:stickyまたは、http ：//updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKitの使用を検討することもできます。

しかし、そのためにどのようなブラウザサポートが得られるかはわかりません。

于 2013-03-26T20:06:45.083 に答える
0

これを試して

ボディタグ：

<body onLoad="test();">

javascriptファイル

function test() {
    document.getElementById("outer").addEventListener ("scroll", bottom);   
}
function bottom(){
  var o = document.getElementById("outer");
  var i = document.getElementById("inner");
  i.style.bottom =  - o.scrollTop;
}

これがdeJSBINですhttp://jsbin.com/ocijeg/1/edit

于 2013-03-26T20:36:22.320 に答える