Question

我有这个放置所有div元素的default.html文件。

我需要修复div标题和侧边栏，如果内容太大，则只能将div内容滚动。

我的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>
<style type="text/css">
    .content {
        display: -webkit-flex;
        display: flex;
        height: 100vh;
        width: 100%;
        overflow: auto;
    }
</style>
</head>
<body>
    <div th:id="defaultFragment" th:fragment="defaultFragment">
    <div id="header" th:replace="fragments/header :: headerFragment">    </div>
        <div class="main-container container-fluid">
            <div class="page-container">
                <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
                <div class="page-content">
                    <div class="page-body">
                        <div id="content" layout:fragment="content"></div>
                    </div>
                </div>
            </div>
            <div th:replace="fragments/footer :: footerFragment"></div>
        </div>
    </div>
</body>
</html>

我在这里缺少什么？

Answer 1

您正在使用CSS中的类和代码中的ID。你不需要类型=＆＃34; text / css＆＃34;在html5：

<style>
    #content {
        display: -webkit-flex;
        display: flex;
        height: 100vh;
        width: 100%;
        overflow: auto;
    }
</style>

Answer 2

.header, .footer { overflow: hidden; position: fixed; }
.page-content { overflow: auto; }

Answer 3

<!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">

 #content {

    height: 150px;
    width: 100%;
    background-color:lightpink;
    padding:25px;
    margin:20px;

 }
 #header{
 color:white;   
 width:100%;
 height:40px;
 left:0;
 top:0;
 position:fixed;
 background-color:black;
 }
#sidebar{
 top:0;
 left:0;
 width:90px;
 height:100%;
 position:fixed;
 color:white;
 background-color:steelblue;
     }
  </style>
  </head>
  <body>
<div id="defaultFragment" fragment="defaultFragment">
<div id="header"> <center><h3>Header</h3></center>   </div>
    <div class="main-container container-fluid">
        <div class="page-container">
            <div id="sidebar" th:replace="fragments/sidebar :: sidebarFragment"></div>
            <div class="page-content">
                <div class="page-body">
                    <div id="content" layout:fragment="content"></div>
                    <div id="content" layout:fragment="content"></div>
                    <div id="content" layout:fragment="content"></div>
                    <div id="content" layout:fragment="content"></div>
                </div>
            </div>
        </div>
        <div th:replace="fragments/footer :: footerFragment"></div>
    </div>
</div>
</body>
 </html>

HTML - 如何使一个div可滚动而其他div是静态的？

3 个答案: