web-dev-qa-db-ja.com

bootstrap事前スクロール可能なDIVの高さを修正

私のアプリケーションでは、データベースレコードのbootsatarpグリッドを表示する必要があります。レコード数はページ全体をスクロールしなくても表示できるほど大きいので、テーブルをbootstrap pre-scrollable divでラップし、テーブルをスクロールする機能を提供しました。ただし、常にDIVサイズはブラウザウィンドウの半分です。ほとんどすべてのスタックオーバーフローの投稿と提案を試しましたが、うまくいきません。また、Javaスクリプトをサポートしてこれを修正しようとしましたが、失敗しました。

これは私のHTMLコードです

<div class="col-md-9">
<div  class="pre-scrollable">
<table class="table table-bordered table-hover header-fixed"  id="sometable">
                    <thead>
                  <tr>
                    <th>EMP_No</th>
                    <th>Name</th>
                    <th>Designation</th>
                    <th>Department</th>
                    <th>Type</th>
                    <th>#Days</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Half day</th>
                    <th>Status</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
                <?php  //php code for print the table
                 ?>
</div>      
</div>

上記の表にPHPコードの結果を入力します。このDIVの高さをブラウザウィンドウの固定値または完全な値に設定する方法がわかりません。以下は使用されているCSSです。

<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
td, th {
    border: 1px solid #dddddd;
    text-align: center;
    padding: 1px;
}
thead th {
    text-align: center;
    background-color: #3498db;
}
tr:nth-child(even) {
    background-color: #dddddd;
}
</style>

これは結果のWebページです

javascriptphpcsshtmltwitter-bootstrap-3
8
gripen fighter

bootstrap cssファイルの.pre-scrollable divに設定されたmax-heightプロパティがあります。

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}

それが問題の原因である可能性があります。

18
Vcasso

簡単にするために、cssビューポートの寸法を使用できます。このようなもの：

<div class="pre-scrollable" style="max-height: 75vh">
     <table>...</table>
</div>

ここで、「75vh」は目に見える高さの75％です。

5
Maxim Prasolov

Twitter bootstrap-スクロール可能なサイドバー付きの固定レイアウト が役立ちます...リンクされたページの例では、テーブルではなくdivの高さを設定する必要があることを示しています。

<style type="text/css">
        body, html {
            height: 100%;
            overflow: hidden;
        }

        .navbar-inner {
            height: 40px;
        }

        .scrollable {
            height: 100%;
            overflow: auto;
        }

        .max-height {
            height: 100%;
        }

        .no-overflow {
            overflow: hidden;
        }

        .pad40-top {
            padding-top: 40px;
        }
</style>
4
CLHardman