Я некоторое время гуглял и пробовал кучу вещей, но ничего не получилось. У меня есть веб-приложение с верхним и нижним колонтитулом и контейнером содержимого между ними. Когда в контейнере содержимого есть только некоторое текстовое содержимое, все выглядит хорошо. Как только я добавляю таблицу в этот контейнер содержимого, он меняет свой размер, чтобы обернуть содержимое, что перемещает позицию нижнего колонтитула. Можно ли вместо таблицы использовать оставшееся пространство контейнера содержимого?
Вот как выглядит 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>
© 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