Question

我已经在Google上搜索了一段时间，并尝试了很多方法，但是都没有用。我有一个带有页眉和页脚以及两者之间的内容容器的Web应用程序。当内容容器只有一些文本内容时，一切看起来都不错。将表格添加到该内容容器后，它就会更改其大小以包装内容，从而移动页脚的位置。可以让表格代替内容容器的剩余空间吗？

这是html的样子：

    <!DOCTYPE html>
    <html>
    <head>
        <title>Spring Security Thymeleaf - User Management</title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    
        
    </head>
    <body>
        <header>
            
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="nav navbar-nav navbar-left">
                    <li class="nav-item">
                        <a class="nav-link" href="/overview/index.html">Overview</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/temperatures/index.html">Statistics</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/controller/index.html">System</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/user/index.html">User Management</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/?locale=en"><img src="/img/usa.png" width="24" height="24"/></a></li>
                    <li><a href="/?locale=de"><img src="/img/germany.png" width="24" height="24"/></a></li>
                </ul>
            </div>
        </nav>
    
        </header>
    
        <div class="container main-content">
            
        <div class="content body-background ">
            <h1>User Management</h1>
    
            <div class="homecontrol-table">
                <table class="table table-bordered table-striped mb-0" id="tableContent">
                    <tr>
                        <th class="sortable asc" scope="col" id="username">Username</th>
                        <th class="sortable" scope="col" id="role">Roles</th>
                        <th class="sortable" scope="col" id="user-action"></th>
                    </tr>
                    <tr>
                        <td scope="row">user</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">admin</td>
                        <td>[USER_ADMIN, CONTROLLER_ADMIN, USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo1</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo2</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo3</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td scope="row">foo4</td>
                        <td>[USER]</td>
                        <td></td>
                    </tr>
                    </div>
                </table>
    
            </div>
    
        
        </div>
    
        <footer>
            
        <footer>
            <div class="container">
                <p>
                    &copy; okrongli.net
                    <span style="display: inline-block;">
                        | <span>Logged in user</span>: <span>manager</span> |
                        <span>Roles</span>: <span>[ROLE_CONTROLLER_ADMIN, ROLE_USER, ROLE_USER_ADMIN]</span> |
                        <a href="/logout">log out</a>
                    </span>
                </p>
            </div>
        </footer>
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="/js/main.js"></script>
    
    
        </footer>
    </body>
    </html>

（此html是通过Java / Spring / Thymeleaf生成的，但我认为这不相关）

谢谢

Stefan

Answer 1

我之前回答过similar question。

您可以将主体设置为弹性列（d-flex flex-column），然后使用100vh将其高度限制为vh-100。然后，您只需要在容器上使用overflow-auto ...

https://www.codeply.com/go/2t4j0YYSc0

<body class="vh-100 d-flex flex-column">
  <header>
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
        ..
    </nav>
  </header>
  <div class="container main-content overflow-auto flex-grow-1">
    <div class="content body-background ">
        <h1>User Management</h1>
        <div class="homecontrol-table">
            <table class="table table-bordered table-striped mb-0" id="tableContent">
                ..
            </table>
        </div>
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>

如何确定桌子高度到容器的高度

1 个答案: