我正在嘗試使用頁眉內容和頁腳制作復雜的 UI。在內容中有兩個部分，一個是側邊欄，另一個是主要內容。在該主要內容中，還有另一個頁眉和頁腳。
下面是我到目前為止在 codepen 中的鏈接。
Codepen 鏈接
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<!-- description text that displays below the link in google search results -->
<meta name="description" content="Description of site" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="header">Header</div id="header">
<div id="main">
<div id="left">
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
</div>
<div id="right">
<div id="right_header">
Right Header
</div>
<div id="right_main">
Right Content <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
</div>
<div id="right_footer">
Right Footer
</div>
</div>
</div id="main">
<div id="footer">Footer</div id="footer">
</body>
</html>
css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #footer {
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: red;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the box border, not just the content */
border: 0;
/* Leave some space for the header and footer to overlay. */
border-top: 20px solid;
border-bottom: 20px solid;
}
#left {
background-color: green;
width: 300px;
height: 100%;
float: left;
overflow-y:auto;
position: relative;
}
#right {
height: 100%;
background-color: blue;
overflow-y:auto;
position: relative;
}
#right_header {
top: 0;
background-color: teal;
position: relative;
}
#right_footer {
bottom: 0;
background-color: teal;
position: relative;
}
#right_main {
overflow-y:auto;
position: relative;
}
我希望右頁眉和頁腳部分保持粘性并留在螢屏上，并且溢位-y 僅發生在右內容部分中。這將如何完成？
在旁注中，我發現的一個問題是您必須將頁眉和頁腳的高度硬編碼為邊距值。如果頁眉和頁腳的高度未知，是否仍然可以僅通過 css 制作這樣的 UI？
任何幫助表示贊賞！
uj5u.com熱心網友回復：
你可以讓它們變得粘稠。
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#header, #footer {
position: absolute;
left: 0;
right: 0;
height: 20px;
background-color: red;
/* Specify a background color so the content text doesn't
bleed through the footer! */
}
#header {
top: 0;
}
#footer {
bottom: 0;
}
#main {
height: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Ensure that the height of the element includes the box border, not just the content */
border: 0;
/* Leave some space for the header and footer to overlay. */
border-top: 20px solid;
border-bottom: 20px solid;
}
#left {
background-color: green;
width: 300px;
height: 100%;
float: left;
overflow-y:auto;
position: relative;
}
#right {
height: 100%;
background-color: blue;
overflow-y:auto;
position: relative;
}
#right_header {
top: 0;
background-color: teal;
position: sticky;
background: yellow;
z-index: 100;
}
#right_footer {
bottom: 0;
background-color: teal;
position: sticky;
background: yellow;
z-index: 100;
}
#right_main {
overflow-y:auto;
position: relative;
border: 1px solid yellow;
min-height: calc(100% - 40px);
}<div id="header">Header</div id="header">
<div id="main">
<div id="left">
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
Left Section <br>
</div>
<div id="right">
<div id="right_header">
Right Header
</div>
<div id="right_main">
Right Main <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
Right Section <br>
</div>
<div id="right_footer">
Right Footer
</div>
</div>
</div id="main">
<div id="footer">Footer</div id="footer">轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/515874.html
標籤：htmlcss用户界面