ビューポートheigth全体を使用して表示するテーブルコンポーネントを設定する

Question

私のコンポーネントにheight: 100vhとminHeight:"100vh"をそれぞれ使用しようとしましたが動作しません。それでもテーブル全体が表示されます。私は表示することができる行の最大を持っていますが、私はテーブルがスクロールする唯一のものを作ることによってページスクロールバーを引き起こすのを避けるテーブルをしたい。

明確な高さと隠れたオーバーフローを設定することでこれを達成できますが、明確な高さが問題になります。すべてのビューポートが同じサイズではなく、いくつかのビューポートが完璧ではありませんが、他のビューポートでは小さすぎたり長すぎたりします。だから、このテーブルにウィンドウの高さを読んで、それを使って隠れたオーバーフローがスクロールを開始するタイミングを定義します。

私は、これは私のテーブルのために動作していないようされてjQueryの

$(document).ready(function() { 
    function setHeight() { 
     windowHeight = $(window).innerHeight(); 
     $('.sidebar').css('min-height', windowHeight); 
    }; 
    setHeight(); 

    $(window).resize(function() { 
     setHeight(); 
    }); 
}); 

問題でこれを見つけました。

私はこのために遊び場を持っているcodepenを追加しています。

EDIT：これは実際にリアクトアプリであることを行っているので、それが動作した後、私はまだよ：明確化のために、ここで

私の問題を視覚的に追記がありますReactJSでそれを取得する必要がありますが、jQueryでうまく動作するようになるのは、おそらくもっと早く簡単になるでしょう。しかし、もしReactに解決策があるとしたら、分かち合いましょう。

$(document).ready(function() { 
 
    function setHeight() { 
 
    windowHeight = $(window).innerHeight(); 
 
    $('.dynamicHeight').css('min-height', windowHeight); 
 
    }; 
 
    setHeight(); 
 
    
 
    $(window).resize(function() { 
 
    setHeight(); 
 
    }); 
 
}); 
 

 
// If you don't care about changing the height when the window resizes then you can use the following simplified version instead: 
 

 
// $(document).ready(function() { 
 
// windowHeight = $(window).innerHeight(); 
 
// $('.sidebar').css('min-height', windowHeight); 
 
// });

body { 
 
    background-color: #ddd; 
 
    font-size: 1.5em; 
 
    font-family: Georgia, serif; 
 
} 
 

 
.sidebar { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 33%; 
 
    padding: 2em; 
 
    background-color: #f8ca00; 
 
} 
 
.dynamicHeight{ 
 
\t overflow-x:hidden; 
 
\t height:100%; 
 
\t display: inline-block; 
 
\t width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='sidebar'> 
 
    <table class="dynamicHeight"> 
 
    <thead> 
 
     <tr> 
 
     <th>Header</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr>  
 
    </tbody> 
 
    
 
    </table> 
 
</div>

Answer 1

.dynamicHeightの代わりに.sidebarの高さを設定しました。私はまた、min-heightをheightに変更しました。内容が長い場合は、min-heightは、ウィンドウを超えて高さを広げます。また、innerHeightは数字だけを返します。pxを追加する必要があります。いくつかoverflow-y:autoは、私は問題なく、サイドバーの高さを制御することができます.sidebar

Javascriptを

$(document).ready(function() { 
    function setHeight() { 
    windowHeight = $(window).innerHeight(); 
    $('.dynamicHeight, .sidebar').css('height', windowHeight + 'px'); 
    }; 
    setHeight(); 

    $(window).resize(function() { 
    setHeight(); 
    }); 
}); 

CSS

.sidebar { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    float: left; 
    width: 33%; 
    padding: 2em; 
    background-color: #f8ca00; 
    overflow-y:auto; 
} 

Codepen

Answer 2

あなたがheightまたはWindows hieghtにtableのmax-heightを設定することで、ちょうどそのパディングを削除することを達成することができ、code snippet

---

$(document).ready(function() { 
 
    function setHeight() { 
 
    windowHeight = $(window).innerHeight(); 
 
    $('.sidebar').css('max-height', windowHeight); 
 
    }; 
 
    setHeight(); 
 
    
 
    $(window).resize(function() { 
 
    setHeight(); 
 
    }); 
 
});

body { 
 
    background-color: #ddd; 
 
    font-size: 1.5em; 
 
    font-family: Georgia, serif; 
 
    margin:0px; 
 
} 
 

 
.sidebar { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 33%; 
 
    background-color: #f8ca00; 
 
    overflow:auto; 
 
} 
 
.dynamicHeight{ 
 
\t overflow-x:hidden; 
 
\t height:100%; 
 
\t display: inline-block; 
 
\t width:100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='sidebar'> 
 
    <table class="dynamicHeight"> 
 
    <thead> 
 
     <tr> 
 
     <th>Header</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr> 
 
     <tr><td>Body Row</td></tr>  
 
    </tbody> 
 
    
 
    </table> 
 
</div>

を見ます