อเล็กซานเดอร์ เทคนิคของคุณที่นี่ดีมาก ฉันมีข้อกำหนดเพิ่มเติมบางประการสำหรับโปรเจ็กต์ที่ฉันกำลังทำอยู่ ฉันต้องการส่วนหัวคงที่และส่วนท้ายแบบติดหนึบ แต่ยังต้องมีแถบด้านข้างคงที่สำหรับการนำทางที่ตอบสนองเช่นกัน ด้วยตัวอย่างของคุณ ฉันสามารถแก้ไขและบรรลุเป้าหมายนั้นได้โดยไม่ต้องใช้ flexbox หรือ cssgrid ที่รองรับไม่ดี ขอบคุณ! นี่คือวิธีแก้ปัญหาของฉัน:
https://jsfiddle.net/jrotondo/zecdv0h5/1/
`
html, body {
height:100%; margin:0;padding:0;
}
html {
background:#fff;
}
.header-container {
width:100%;
height:52px;
background-color:#ccc;
margin:0 auto;
position:fixed !important;
position: absolute; /*ie6 and above*/
top:0;
left:0;
right:0;
}
header {
width:80%;
margin:0 auto;
height:52px;
text-align:center;
}
aside.sidebar-container {
background-color:#ff9900;
margin: 0 0 -52px 0;
position:fixed !important;
position: absolute; /*ie6 and above*/
top: 52px;
left:0;
}
#content {
min-height: 100%;
height: auto !important;
height: 100%;
box-sizing: border-box;
}
footer {
width:100%;
height: 75px;
background-color: #666;
color: #fff;
margin:0 auto;
text-align:center;
}
.push {
height:75px;
}
/*Mobile View*/
@media only screen and (max-width: 1024px) {
aside.sidebar-container {
width:100vw;
height:42px;
z-index: 1;
}
#content {
padding-top: 94px;
width: calc(100vw - 40px);
margin: 0px 20px -75px 20px;
}
}
@media only screen and (min-width: 1025px) {
aside.sidebar-container {
width:192px;
height:100vh;
z-index: -1;
}
#content {
padding-top: 62px;
width: calc(100vw - 232px);
margin: 0px 20px -75px 212px;
}
}
`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Header / Sticky Footer</title>
<link rel="stylesheet" href="/thstyle.css">
</head>
<body>
<div class="header-container">
<header>
Fixed Header
</header>
</div>
<aside class="sidebar-container">
<nav class="main-nav">
Fixed Nav
</nav>
</aside>
<div id="content">
<p>
Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
</p>
<p>
Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
</p>
<p>
Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
</p>
<p>
Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
</p>
<p>
Praesent tortor massa, ultrices in mattis non, viverra vitae eros. Fusce egestas suscipit nulla tincidunt cursus.
Etiam eget tortor sit amet arcu bibendum bibendum nec in lorem. Phasellus posuere placerat mi, et consequat sem molestie ut.
Sed eget sapien sed lacus laoreet vestibulum sit amet nec lectus. Aenean sed tortor turpis. Morbi consectetur diam quis augue
convallis iaculis. Curabitur pulvinar scelerisque euismod. Cras et sagittis mauris. Mauris nisl ipsum, bibendum et congue vitae,
blandit id sapien. Suspendisse ipsum metus, vehicula quis ultrices at, interdum quis nunc. Aenean fermentum hendrerit nisl vitae
euismod. Morbi dictum mattis tellus, ac ornare sapien venenatis quis.
</p>
<div class="push"></div>
</div>
<footer> Sticky Footer</footer>
</body>
</html>
person
John Rotondo
schedule
06.09.2017
