web-dev-qa-db-ja.com

divの高さを画面サイズに等しく設定します

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 Questions

編集-

申し訳ありませんが、質問を間違えたと思います。

私が望むのは、私のdivが画面の残りの垂直スペースを埋めなければならないということです。

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

csshtmltwitter-bootstrapheightresponsive-design
28
Anand Sunderraman

CSS {height: 100%;}を使用すると、親の高さに一致します。これは何でもかまいません。つまり、画面よりも小さいか大きいということです。 {height: 100vh;}を使用すると、ビューポートの高さと一致します。

.container {
    height: 100vh;
    overflow: auto;
}

Mozilla's 公式文書によると、1vhは：

ビューポートの初期包含ブロックの高さの1％に等しい。

53
Kurt Van den Branden

親要素にもheightを与える必要があります！これを確認してください fiddle 。

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());
    });
});
26
Praveen Kumar Purushothaman

これを試して

$(document).ready(function(){
    $('#content').height($(window).height());
});
13
gaurang171

つかいます

 $（document）.height（）
  オーバーフロー=自動 

スクロール用

1
Aravindhan

これは私のために働いた JsFiddle

Html

..bootstrap
<div class="row">
  <div class="col-4 window-full" style="background-color:green">
    First Col
  </div>
  <div class="col-8">
    Column-8
  </div>
</div>

css

.row {
   background: #f8f9fa;
   margin-top: 20px;
}

 .col {
   border: solid 1px #6c757d;
   padding: 10px;
}

JavaScript

var elements = document.getElementsByClassName('window-full');
var windowheight = window.innerHeight + "px";

fullheight(elements);
function fullheight(elements) {
    for(let el in elements){
        if(elements.hasOwnProperty(el)){
            elements[el].style.height = windowheight;
        }
    }
}

window.onresize = function(event){
     fullheight(elements);
}

JsFiddleリンクのチェックアウト JsFiddle

0
Chaudhari Akash