46

twitter-bootstrapにdiv要素があり、画面の外側に垂直にオーバーフローするコンテンツが含まれます。

divでブラウザウィンドウのサイズの高さを取得し、残りのコンテンツをウィンドウ内で垂直方向にスクロールさせたいと思います。

@jsFiddleで動作しないサンプルがあります

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

私は読んだ後にこの質問を投稿しているので、SOの質問のような質問

編集 -

申し訳ありませんが、質問が間違っていると思います。

私が欲しいのは、私のdivが画面の残りの垂直スペースを埋める必要があるということです。

誰かがレスポンシブな解決策を提案できれば素晴らしいと思います

4

5 に答える 5

31

height親要素も与える必要があります！このフィドルをチェックしてください。

CSS:

html, body {height: 100%;}

#content, .container-fluid, .span9
{
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}​

JavaScript (jQuery を使用) 方法:

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});
于 2012-08-29T06:46:30.373 に答える
14

これを試して

$(document).ready(function(){
    $('#content').height($(window).height());
});
于 2012-08-29T06:48:58.063 に答える
1

使用する 

$(ドキュメント).高さ()
プロパティを設定し、スクリプトから div に設定して設定します

  オーバーフロー=自動

スクロール用

于 2012-08-29T06:44:39.457 に答える