Question

我对下面的代码提出了一个问题：

我更像是一个低级程序员，所以我知道足够的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％，只需使用100vh，这意味着100％的视口高度。根据定义，每个单位代表测量轴的1％。

对于可用性问题，您可能还需要考虑声明最小高度，以便在用户视口太短时表格不会折叠到可笑的小高度。

在下面的代码段中，我为您的.div-table-content提供了一个完整的视口高度，并且最小高度为250px。您可以调整视口大小以查看其运行情况。为了说明的目的，我在元素中添加了黄色背景颜色。

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>

Answer 2

是的，您可以使用以下方式在javascript中获得高度：

<强> window.innerHeight

现在，当您想要将高度分配给特定类时，您可以使用：

document.getElementsByCalssName('div-table-content')[0].style.height = window.innerHeight+"px";

注意

window.innerHeight

为您提供整数窗口的高度，如果需要，可以在其中应用更改。

Answer 3

您可以在height:100vh中使用CSS。这是你的updated fidle

如何获得浏览器的高度

3 个答案: