1

必要に応じて div にスクロール バーを追加できますが、div 自体またはこの div が必要なコンテナーの高さを指定しませんか?

div はページのボタン要素であり、ユーザーがブラウザ ウィンドウのサイズを変更できるようにしたいと考えています。そのため、div に動的に追加される「データ」がページの下部に到達すると、スクロール バーが表示されます。

私のページにはテーブルが1つしか含まれておらず、テーブルの2行目はコードの下にあります。

<table border="0">
 <tr>
    <td><button type="button" onclick="$('#info').text('')" > clear info area </button></td>
 </tr>
 <tr class="tr_info">
    <td><div id='info'></div></td>  
 </tr>
</table>

divを試しoverflow-y: scroll;てみましたが、div ではなくウィンドウ全体にスクロール バーが追加されました。

4

4 に答える 4

2 
html, body { height: 100%; }
div { height: 100%; overflow: auto; }

http://jsfiddle.net/Wexcode/xMdPA/

少ないテキスト： http： //jsfiddle.net/Wexcode/xMdPA/1/

ページの下部にテキストを表示することもできます：http：//jsfiddle.net/Wexcode/xMdPA/2/

于 2012-08-29T23:38:16.030 に答える
2

フィドルhttp://jsfiddle.net/RSh9H/2/show/

修正されたフィドル: http://jsfiddle.net/RSh9H/8/show/

jQuery:

$(window).on('load resize',function(){
var heightOfWindow = $(window).height();
var totalHeightOfContents = $(document).height();
    if(heightOfWindow <= totalHeightOfContents){
        var heightExcludingInfo = $('table#main').height() - $('#info').height();
        var availableHeightForInfo = heightOfWindow - heightExcludingInfo;
        $('#info').height(availableHeightForInfo);
    }
    else{
        $('#info').css({height:'auto'});
    }
});
于 2012-08-30T00:07:40.453 に答える
1

@zenkatyの投稿をオフにします。

その要素のスタイルで、put overflow-y:auto、このようにオーバーフローがある場合はスクローラーが表示されますが、そうでない場合はスクロールバーが表示されません。

overflow-y:scroll（これとは対照的に、常にスクロールバーが表示されます。

編集：

Sabithpockerが指摘したように、高さがない場合、私が知る限り、テーブルが拡大して、テキストが多すぎるとすべてのテキストが表示されます。高さを設定すると、を使用できますoverflow-y:auto。たとえば、http：//jsfiddle.net/rZV5u/を参照してください。

お役に立てれば！

于 2012-08-29T23:39:20.830 に答える
0

これを div に配置するだけです。これを body/html に追加すると、明らかにウィンドウ全体がスクロールします。

div {
  overflow-y: scroll;
}
于 2012-08-29T23:28:48.987 に答える