3

下部に固定部分があり、上部にコンテンツが動的に入力される部分があるWebページを作成したいのですが、この動的部分には、追加されたコンテンツが収まらない場合にスクロールバーが必要です。固定部分。

style.css：

.action-box{
    position: fixed;
    bottom: 15px;
    margin-top: 10px;
    width: 100%;
}

index.html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div>
    <!-- this will be filled with content -->
  </div>
  <div class="action-box">
    <!-- this is the fixed part -->
  </div>
</body>
</html>

このフィドルで、2つdivが重なっていることがわかります。

div最初のスクロール可能にして、最後のスクロール可能の上または下にスライドしないようにするにはどうすればよいdivですか？

4

3 に答える 3

2

ウィンドウの高さに応じて、動的なサイズ変更を使用することを提案します。

次にjQuery例を示します。

function adjustBlocks() {
    var winH = $(window).height();
    var boxH = $('#action-box').height();
    $('#content').height((winH - boxH) + 'px');
}

$(document).ready(adjustBlocks);

$(window).resize(adjustBlocks);

サンプルHTML：

<div id="content"></div>
<div id="action-box"></div>

そしてサンプルCSS：

#content{
    width: 100%;
    background: #eee;
    overflow-y: scroll;
}

#action-box{
    width: 100%;
    background: #ffccaa;
}

もちろん、余白を簡単に追加して、jQueryサイズ変更機能でそれらに言及することができます。

ああ、そしてjsfiddleの例

于 2012-08-12T09:23:57.777 に答える
2

最も簡単な方法は、下部の固定divの全高に一致する上部のdivに適用margin-bottomすることです。また、下部のdivに背景色とともに高さを指定して、他のdivが透けて見えないようにする必要があります。 。

.action-box{
    position: fixed;
    bottom: 0px;
    height: 20px;
    padding-bottom: 10px;
    width: 100%;
    background-color: white;   
}

.content {margin-bottom: 50px}​

http://jsfiddle.net/RdGXt/151/

于 2012-08-12T08:59:20.020 に答える
0

高さが固定されたcssクラスを指定してoverflow: scroll;

于 2012-08-12T08:44:29.287 に答える