Верхняя панель навигации и позиция нижнего колонтитула, не мешая остальной части страницы без использования каких-либо библиотек и структур

Question

У меня всегда одни и те же проблемы с верхней панелью навигации и нижним колонтитулом.У меня всегда есть проблема, чтобы поместить их в правильное положение.

Навигация сверху: логотип должен быть слева вверху и выравнивание по правому краю

Нижний колонтитул: находится в середине страницы, хотя я следовал рекомендации и создал основной контейнер для всех элементов div намоя страница.

CSS & изображение, прикрепленное к вопросу

html,body {
   margin:0;
   padding:0;
   height:100%;
   color: #696969;
}
#mainContainer{
    min-height:100%;
    position:relative;
}

header{
    background-color:#F8F8F8;
    height: 120px;
    border-bottom: 1px solid #CDCDCD;
    display: flex;
}

.topnav {
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 5%;
    position: absolute;
   align-items: flex-start;
   float: right;
}

.topnav a {
    float: right;
    display: block;
    color: #343434;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 20px;
}


.topnav a.active {
    color: #4CAF50;
}

.sidebar {
    margin-left: 12%;
    padding: 0;
    width: 12%;
    position: absolute;
    height: 100%;
    overflow: auto;
  }
.sidebar a {
    display: block;
    color: #696969;
    padding: 15px;
    text-decoration: none;
    border-bottom: 1px solid #F8F8F8;
    border-right: 1px solid #F8F8F8;
}

section {
    margin-left: 25%;
    margin-right: 12%;
    position: absolute;
    display: inline-block;
    border-bottom: 1px solid #F8F8F8;
}



#footer{
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;
    color: #696969;
}

footer { 
    display: flex;
    position: absolute;
    bottom: 60px;
    border-bottom: 1px solid #F8F8F8;
    border-top: 1px solid #F8F8F8;
}
.rights{
    text-align:left;
    padding: 10px 10px;
}

.socialnets{
    text-align:center;
    padding: 10px 10px;
}


.newsletter{
    text-align:right;
    padding: 10px 10px;
}

Answer 1

установка 100% высоты тела по существу наследует от области просмотра.вот почему нижний колонтитул фиксируется в нижней части значения пикселя для вашего окна просмотра, и если вы прокручиваете, он не «прилипает».

Я предполагаю, что это то, что вы хотите? ..

Я понятия не имею, какова структура вашего html, так что это просто выходит за рамки вашего CSS.

Я бы посоветовал взглянуть на flexbox и проверить метод липкого нижнего колонтитула с помощью flex.https://codepen.io/devatrox/pen/wztlx

html,body {
   margin:0;
   padding:0;
   min-height:100vh;
   height:100%;
   color: #696969;
}
#mainContainer{
    min-height:100%;
    position:relative;
}

header{
    background-color:#F8F8F8;
    height: 120px;
    border-bottom: 1px solid #CDCDCD;
    display: flex;
}

.topnav {
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 5%;
    position: absolute;
   align-items: flex-start;
   float: right;
}

.topnav a {
    float: right;
    display: block;
    color: #343434;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 20px;
}


.topnav a.active {
    color: #4CAF50;
}

.sidebar {
    margin-left: 12%;
    padding: 0;
    width: 12%;
    position: absolute;
    overflow: auto;
    background-color: red;
    height: calc(100% - 121px);
}


.sidebar a {
    display: block;
    color: #696969;
    padding: 15px;
    text-decoration: none;
    border-bottom: 1px solid #F8F8F8;
    border-right: 1px solid #F8F8F8;
}

section {
    margin-left: 25%;
    margin-right: 12%;
    display: inline-block;
    border-bottom: 1px solid #F8F8F8;
}



#footer{
    position:relative;
    bottom:0;
    width:100%;
    height:60px;
    color: #696969;
background-color:blue;
}

footer { 
    display: flex;
    position: absolute;
    bottom: 60px;
    border-bottom: 1px solid #F8F8F8;
    border-top: 1px solid #F8F8F8;
}
.rights{
    text-align:left;
    padding: 10px 10px;
}

.socialnets{
    text-align:center;
    padding: 10px 10px;
}


.newsletter{
    text-align:right;
    padding: 10px 10px;
}

<div id="mainContainer"><header><div class="topnav">top</div></header><div class="sidebar">side</div><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section><section>Content <h1>heading</h1><p>TExt or stuff idk</p></section>
<div id="footer">FOOTER</footer>