動的データを使用して0 PXとして計算される100％の高さを修正する方法

StackOverflow https://stackoverflow.com/questions/8808311

  •  26-10-2019
  •  | 
  •  

質問

Twitter Bootstrap CSSファイルで構築を開始したページがあります。 .container-fluid.sidebarと.container_fluid.contentがウィンドウの100％であり、自動独立したスクロールバーを持っていることを望みます。サイドバーとコンテンツを次のように設定したとき

.container-fluid>.sidebar{position:absolute;top:42px;left:20px;width:240px; overflow-y:auto;overflow-x:visible;min-height: 94%;}
.container-fluid>.content{top:42px;margin-left:240px;overflow-y:auto;overflow-x:visible;min-height: 94%;height:94%;}

高さは0pxとして計算されます。私はこれらのアイテムを埋めている動的なデータを持っているので、彼らはちょうど始めます

<div class="container-fluid" id="main">
    <div id="navigation" class="sidebar">
        <ul class="treeview"/>
    </div>

    <div id = "mainwindow" class="content">
        <div id="update_panel"/>
    </div>
</div>

私は、すべての動的データが手動で600 pxに手動で設定することにより正しく浸透していることを確認しました。

役に立ちましたか？

解決 2

私は、ほとんどのページをカプセル化した余分なタグを削除することで、これを理解することができました。現在、CSSだけで動作しています。

他のヒント

私がこれを行う方法を知っている唯一の方法は、JavaScriptと「DHTML」を介してです。以下はあなたのためにトリックを行う必要があり、ユーザーがウィンドウをサイズするとサイズ変更されます。問題があることの1つは、利用可能な垂直クライアント領域の量を変更する水平スクロールバーが追加されたときに起こることです。

GetClientHeightルーチンは、クロスブラウザー安全であり、すべての最新のブラウザがGetElementByIDをサポートする必要があります。

関数getClientHeight（）{

var windowHeight = window.innerHeight ? window.innerHeight :

                          (document.documentElement && document.documentElement.clientHeight ?

                          document.documentElement.clientHeight : document.body.clientHeight);

return windowHeight;

} //関数getClientHeight

//このルーチンは、「MainIndow」と「Naviagtion」Divの「高さ」を設定します

  function sizeDivs() {

    var cH = getClientHeight();

        var eMW = document.getElementById('mainwindow');

    eMW.style.height = cH + 'px';

    var enav = document.getElementById('navigation');

    enav.style.height = cH + 'px';

  } // function sizeDivs

function loadevent（e）{

sizeDivs();

} // function loadevent

//これはウィンドウ「サイズ変更」ハンドラーです - ウィンドウサイズが変更されたとき、私たちは私たちのdivをサイズ変更したい

var Resizetimer;

function handleresize（）{ 

  clearTimeout(resizeTimer); 

  resizeTimer = setTimeout(sizeDivs, 200);

} // Handleresize

//今こそページのロードを設定してハンドラーのサイズを変更する時です

window.onload = loadevent;

window.onresize = handleresize;

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top