thymeleaf - Wie man Header-Fragment-überlappenden Inhalt und Sidebar-Menü zu beheben?

Auf meiner App habe ich ein Fragment, das alle anderen Fragmente zerlegt. Es wird unten transkribiert:thymeleaf - Wie man Header-Fragment-überlappenden Inhalt und Sidebar-Menü zu beheben?

<!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>

Was ich bemerkt habe ist, dass der Header-Fragment Abschnitt den folgenden Abschnitt überlappt. Wenn ich den Header-Abschnitt auskommentiere, wird das nächste div (id = "sidebar-and-content") oben auf der Seite gerendert. Wenn ich es auskommentiere (id = "header"), wird das nächste div auch oben auf der Seite und unterhalb der Kopfzeile gerendert.

Wie löse ich es?

Quelle

2016-06-09 gtludwig

schaffte ich es dadurch zu lösen, ... auf eine frühere Version zurückkehrt

<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>

Alles ist gut und arbeitet als sollte.

Quelle

2016-06-09 03:50:19 gtludwig

thymeleaf - Wie man Header-Fragment-überlappenden Inhalt und Sidebar-Menü zu beheben?

Antwort

Verwandte Themen