Question

在我的Spring MVC + Thymeleaf应用程序中，我有一个安装页面的默认片段。它是：

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

某些页面，特别是那些具有非常宽的表格的页面，超出了可见区域的宽度，不仅看起来很糟糕，您还必须使用箭头键移动浏览器“视口”。我希望内容片段可以自动调整。

怎么做到？

Answer 1

您可以使用CSS overflow属性来“隐藏”溢出的内容。设置元素的width和overflow属性。

.page-body {
  width:    800px;
  overflow: hidden;

  /* OR
  overflow: scroll; */
}

<div class="page-content">
  <div class="page-body">
    <div layout:fragment="content"></div>
  </div>
</div>

Thymeleaf - 如何自动调整内容片段？

1 个答案: