1

項目の長いリストを含む div がページの高さを拡大しないようにするにはどうすればよいですか。divが画面全体を占めるようにしたいのですが、フッターを押し下げないようにする必要はありません。

4

3 に答える 3

2

divコンテナに特定の高さを設定overflow-yし、div のコンテンツが で設定された高さよりも大きい場合にのみスクロール バーを表示するには、auto も設定しますcontainer。このような：

.container { 
    height: 500px; 
    overflow-y:auto;
}
于 2013-01-15T16:14:29.070 に答える
0

jsがないと、ページを異なる解像度で表示できるため、それは不可能です。解像度が異なると、高さが異なります。実際のところ、ユーザーがブラウザウィンドウのサイズを変更したときにも、その動作が必要になる場合があります。したがって、最初に、ブラウザーの高さを調べ、そこからフッターの高さを差し引き、この高さをコンテナーに設定します。これは、y軸でスクロールできるようにする必要があると思います。それで問題は解決します。これらのタスクはすべて非常に単純で、少しグーグルで実行できます。

于 2013-01-15T16:28:27.380 に答える
0

これには JavaScript/jQuery を使用します。

jQuery ソリューション:

<div id="content-div">some content here</div>

$(document).ready(function() {
  var height = $(document).height();
  height = height - (your footer height);
  $("#content-div").css({ 'max-height' : height.toString() });
});

標準の JavaScript ソリューション:

<div id="content-div">some content here</div>

 function myfunction () {
       document.getElementById('content-div').style.height = getDocHeight() + 'px';
 }

window.onload = myfunction();

document.getElementById('content-div').style.height = getDocHeight() + 'px';

function getDocHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

また、CSS を次のように変更します。

#content-div { background-color:#1d1d1d; color:#eee; overflow-y: scroll; }
于 2013-01-15T16:12:13.763 に答える