在我的应用程序中，我有一个 default.html 片段，它拼凑了所有其他片段。现转录如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<link rel="shortcut-icon" th:href="@{/assets/img/favicon.png}" type="image/x-icon" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<section th:id="defaultFragment" th:fragment="defaultFragment">
<section id="header" th:replace="fragments/header :: headerFragment"></section>
<div id="sidebar-and-content" class="main-container container-fluid">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-container">
<div class="page-content">
<div class="page-body" >
<div layout:fragment="content"></div>
</div>
</div>
</div>
<section th:replace="fragments/footer :: footerFragment"></section>
</div>
</section>
</body>
</html>
我注意到标题片段部分与以下部分重叠。如果我注释掉标题部分，下一个 div (id="sidebar-and-content") 将呈现在页面顶部。当我取消注释时 (id="header")，下一个 div 也会呈现在页面顶部和标题“下方”。
如何解决？
最佳答案
我设法通过恢复到早期版本来解决它...
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
一切正常，工作正常。
关于html - thymeleaf - 如何修复标题片段重叠内容和侧边栏菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37716143/