Александр, у вас хорошая техника. У меня было несколько дополнительных требований к проекту, над которым я работаю. Мне нужен был фиксированный верхний и нижний колонтитулы, а также фиксированная боковая панель для навигации, которая также была адаптивной. В вашем примере я смог изменить и добиться этого БЕЗ использования плохо поддерживаемых 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="style.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
