css - CSS - 如何将table的高度设置为它的容器

145 3

我有一个带有页眉和页脚的web应用程序,有一个内容容器,当内容容器只有一些文本内容时,一切看起来都很好。向内容容器添加table后,它会更改大小,内容换行,这将移动页脚的位置,可以让表格代替内容容器的剩余空间吗?

这就是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生成的,,但是我不认为这是相关的)

谢了。

时间: 原作者:

98 2

你可以使body成为一个flex列(d-flex flex-column ),然后使用vh-100将它的高度限制为100vh ,然后你只需要在容器上使用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>



原作者:
...