HTML - 如何讓一個div可滾動，其他靜態？

我有這個放置所有div元素的default.html文件。HTML - 如何讓一個div可滾動，其他靜態？

我需要修剪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>

缺少什麼我在這裏？

來源

2016-06-09 gtludwig

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

來源

2016-06-09 04:22:22 SESN

仍然無法正常工作。 – gtludwig

可以在jsFiddle中發佈，以便我可以上班 – SESN

問題是，從Spring提供的標題，側欄和內容區域的內容我無法上傳這些... – gtludwig

您正在使用CSS中的類和代碼中的ID。 ASLO你不需要類型= 「文/ CSS」在HTML5：

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

來源

2016-06-09 04:21:52 gavgrif

仍然沒有工作。 – gtludwig

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

來源

2016-06-09 04:35:29

HTML - 如何讓一個div可滾動，其他靜態？

回答

相關問題