Выровняйте нижний колонтитул в нижней части содержимого, нажмите справа от боковой панели

Question

Я хотел разместить нижний колонтитул внизу содержимого, но не по всей ширине страницы.Нижний колонтитул всегда должен быть снизу, если содержимое не размещено, то есть, как показано на рисунке 1. Боковую панель можно переключать с помощью кнопки в navbar.

Мне удалось получить только, как показано ниже:

Боковая панель должна сдвинуть нижний колонтитул вправо, но это всегдана вершине.Так как, когда боковая панель скрыта или свернута, нижний колонтитул должен занимать ширину страницы как занятую, покупая контент.

Реализация HTML имеет следующую структуру:

<div class="wrapper">
   <!-- Navbar -->
   <nav class="navbar navbar-expand-sm fixed-top navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
      <div class="container-fluid">
      </div>
   </nav>
   <!-- Sidebar -->
   <div id="sidebar" class="shadow-sm"></div>
   <!-- Page Content -->
   <div id="content">
      <div class="container-fluid">
         <div class="card">
            <div class="card-body">
               <h1>
                  Collapsing Menu
                  <small class="text-muted">Version 2.1</small>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>
<footer id="page-footer" class="py-3 bg-dark text-light">
   <div class="container">

   </div>
</footer>

CSS длянижний колонтитул и боковая панель:

footer {
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
}
#sidebar {
    margin-top: 54px;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100vh - 55px);
    z-index: 999;
    padding: 10px;
    -webkit-transition: right .5s ease,left .5s ease;
    -moz-transition: right .5s ease,left .5s ease;
    -o-transition: right .5s ease,left .5s ease;
    transition: right .5s ease,left .5s ease;
}

Answer 1

$(document).ready(function(){
  var wheight= $(window).height();
  var contentheight=$(".content").height();
  if(wheight>contentheight){
    $("footer").addClass("fixedfooter");
  }
  else{
     $("footer").removeClass("fixedfooter");
}
})

*{
margin:0;
padding:0;
}
.sidebar {
   height: 100vh;
  float:left;
  width:20%;
  background:red;
}
.wrapper{
  overflow:hidden;
}
.page{
  width:80%;
  float:left;
  
}
.content{
  width:100%;
  height:200px;
  background-color:green;
}
footer {
  width:calc(100%);
  height:50px;
  background-color:blue;
}

.fixedfooter{
  position:fixed;
  right:0;
  bottom:0;
  width:calc(100% - 20%)!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sidebar">sidebar</div>
  <div class="page">
    <div class="content">my content</div>
    <footer>my footer </footer>
  </div>
</div>

это все с помощью jquery!применение класса с фиксированной позицией к нижнему колонтитулу, когда высота содержимого не выше высоты окон!попробуйте изменить высоту содержимого, чтобы проверить результат!

Answer 2

Я бы рекомендовал поместить нижний колонтитул в div с идентификатором «content» или с классом «container-liquid».

Посмотрите, как это работает.

Длинная версия: Ваш нижний колонтитул в настоящее время размещается в соответствии с его родительским контекстом.В текущей версии контекст, в который вы помещаете нижний колонтитул, не входит в объем того, что вы опубликовали, это означает, что с точки зрения обработки нижний колонтитул не знает о контейнере содержимого.Самое быстрое решение здесь - разместить нижний колонтитул в контексте контейнера, в котором находится ваш контент.Таким образом, нижний колонтитул содержится в том же элементе div, в котором представлен контент. Независимо от того, касается ли он нижней части экрана, зависит от вашего CSS.

Надеюсь, это поможет.

Answer 3

.sidebar {
   height: 100vh;
  width:20%;
  background:red;
}
.wrapper{
  display:flex;

}
.page{
  width:80%;
    display:flex;
  flex-direction:column;
  justify-content: space-between;
  height:;
  
}
.content{
  width:100%;
  height:200px;
  background-color:green;
}
footer {
  width:calc(100%);
  height:50px;
  background-color:blue;
}

<div class="wrapper">
  <div class="sidebar">sidebar</div>
  <div class="page">
    <div class="content">my content</div>
    <footer>my footer </footer>
  </div>
</div>

это другой метод только с css!