1

行スクロールで使用できるようにテーブルのサイズを設定したい。したがって、テーブルの高さはページの残りの高さである必要がありますが、それ以上大きくなることはありません。そして、ピクセルサイズのような難しい修正はしたくありません。ウィンドウのサイズに応じて変更したい。これのcss知ってる人いますか？

4

2 に答える 2

1

単位を使用できますがvh、テーブルの高さを「ページの残りの高さ」にする場合は、ページのレイアウト要素の高さを指定する必要があります。

とはvh? 1vhビューポートの高さ、ページが読み込まれたときのウィンドウ内の高さの 1% です。100vhビューポートの高さの 100% です。ウィンドウのサイズが変更されたときに高さが調整されるとは思わない。

<style type="text/css">
div#header {
  height: 25vh;
  overflow: scroll;
}
div#table {
  height: 75vh;
  overflow: scroll;
}
</style>
<body>
  <div id="header">This text explains the contents of the table below.</div>
  <div id="table"><table>...</table></div>
</body>
于 2015-01-28T15:10:10.637 に答える
0

これは、Javascript を使用して実現するか、次のコードを試すことができます。

.myTable {
    position:fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

height: 100%;ただし、ディレクティブを使用することはできません。<html>orにネストされた子で<body>直接使用しようとすると機能しません。

編集:私が知る限り、height: 100%ディレクティブは、高さが固定されていない要素にネストされた要素では機能しません。つまりheight: 100%、その親に明示的に身長が指定されている場合にのみ機能します (例: height: 600px;)。

于 2015-01-28T15:04:39.567 に答える