javascript - 如何获取浏览器的高度

Question

我对下面从中获取的代码有疑问:

http://jsfiddle.net/SAFX/Mq52k/16/

我更像是一个低水平的程序员，所以我知道足够的 HTML/CSS 来应付。我想弄清楚如何根据浏览器窗口高度而不是固定值 150px 来设置表格高度。由于我对 css 的了解有限，我假设仅靠 css 可能无法做到这一点？需要像java脚本这样的东西吗？

HTML:

 <div class="panel panel-default">
    <table class="table table-condensed" >
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
    </table>

<div class="div-table-content">
    <table class="table table-condensed">
        <tbody>
            <tr>
                <td>data</td>
                <td>more data</td>
                <td>hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

table {
    table-layout:fixed;
}

.div-table-content {
  height:150px;
  overflow-y:auto;
}

Answer 1

根据我最初的评论，您可以使用 viewport units in browsers that support CSS3 specs for this new unit of measurement .截至目前，该支持非常广泛，84% 的浏览器支持它。部分支持对您来说不是问题，因为您没有使用 vmax 单元 :)

因此，要使表格占据 100% 的视口(viewport)高度，只需使用 100vh，即 100% 的视口(viewport)高度。根据定义，每个单位代表测量轴的 1%。

对于可用性问题，您可能还需要考虑声明一个最小高度，这样当用户视口(viewport)太短时，表格就不会折叠到离谱的小高度。

在下面的代码片段中，我为您的 .div-table-content 提供了一个完整的视口(viewport)高度，并结合了 250 像素的最小高度。您可以调整视口(viewport)大小以查看实际效果。出于说明目的，我向该元素添加了黄色背景色。

table {
    table-layout: fixed;
}

.div-table-content {
  background: yellow;
  height: 100vh;
  min-height: 250px;
  overflow-y: auto;
}

<div class="panel panel-default">
    <table class="table table-condensed" >
        <thead>
            <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
            </tr>
        </thead>
    </table>

<div class="div-table-content">
    <table class="table table-condensed">
        <tbody>
            <tr>
                <td>data</td>
                <td>more data</td>
                <td>hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
            <tr>
                <td >data</td>
                <td >more data</td>
                <td >hello world, nice to see you again, and what a beautiful fixed header
                    column you have</td>
            </tr>
        </tbody>
    </table>
</div>