Исправлен переключаемый нижний колонтитул в 3 колонках

Поэтому я пытался создать макет из 3 столбцов с помощью:

  • левый столбец панели: прокручиваемое вертикальное меню. показывается по умолчанию, но переключается.
  • правая колонка панели: прокручиваемое меню действий. скрыто по умолчанию, но переключается.
  • content: прокручиваемый контент, который подстраивается под оставшееся содержимое страницы, поэтому при каждом переключении левой, правой или нижней панелей (см. пункт ниже) содержимое не будет покрыто, а div будет настраиваться самостоятельно.
  • нижняя панель: не прокручивается скрыто по умолчанию, но переключается. При показе он должен торчать в нижней части экрана и оставаться там видимым, даже если я прокручиваю содержимое div). Он также должен быть таким же широким, как панель контента, описанная выше.

До сих пор я смог создать фрагмент с переключаемым правым и левым столбцом, и контент подстраивается под него:

$(".header_container > .content").append(() => {
  return "header<br>";
});

$(".right_container > .content").append(() => {
  return "MENU ITEM RIGHT<br>".repeat(100);
});

$(".left_container > .content").append(() => {
  return "MENU ITEM LEFT<br>".repeat(100);
});

$(".terminal_container > .content").append(() => {
  return "terminal ".repeat(100);
});

$(".body_container > .content").append(() => {
  return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});

$(".hideleft").click(() => {
  $(".left_container").toggle();
});

$(".hideright").click(() => {
  $(".right_container").toggle();
});
.container {
  width: 90%;
  height: 180px;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 200px;
  background: green;
  float: left;
  overflow: scroll;
}

.center_container {
  width: auto;
  height: 100%;
  background: red;
  overflow: scroll;
}

.right_container {
  height: 100%;
  width: 200px;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.terminal_container {
  height: 200px;
  overflow: hidden;
  background-color: black;
  color: white;
}

.content {
  padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>

<div class="container">
  <div class="right_container">
    <div class="content">
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    </div>
  </div>
  <div class="center_container">
    <div class="body_container">
      <div class="content">
      </div>
    </div>
    <div class="terminal_container">
      <div class="content">
      </div>
    </div>
  </div>
</div>

Однако я не могу заставить CSS работать для нижней панели журнала (возможно, только с CSS).

Может ли кто-нибудь помочь мне понять, как получить нижнюю панель?

Источник

1 ответ

Решение

Без классов через jQuery

Попробуй это. Я уверен, что + Селектор CSS3, хотя.

$(".header_container > .content").append(() => {
  return "header<br>";
});

$(".right_container > .content").append(() => {
  return "MENU ITEM RIGHT<br>".repeat(100);
});

$(".left_container > .content").append(() => {
  return "MENU ITEM LEFT<br>".repeat(100);
});

$(".terminal_container > .content").append(() => {
  return "terminal ".repeat(100);
});

$(".body_container > .content").append(() => {
  return "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>".repeat(100);
});

$(".hideleft").click(() => {
  $(".left_container").toggle();
});

$(".hideright").click(() => {
  $(".right_container").toggle();
});

$(".hidebottom").click(() => {
  $(".terminal_container").toggle();
});
.container {
  width: 90%;
  height: 180px;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 200px;
  background: green;
  float: left;
  overflow: scroll;
}

.center_container {
  width: auto;
  height: 100%;
  background: red;
}

.right_container {
  height: 100%;
  width: 200px;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.body_container {
  height: 100%;
  overflow: scroll;
}

#bottom {  display: none;  }

#bottom:checked + .body_container {
  height: 80%;
}

.terminal_container {
  height: 20%;
  overflow: hidden;
  display: none;
  background-color: black;
  color: white;
}

.content {
  padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="hideleft">Toggle Left</button>
<button class="hideright">Toggle Right</button>
<label class="hidebottom" for="bottom">Toggle Bottom</label>

<div class="container">
  <div class="right_container">
    <div class="content">
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    </div>
  </div>
  <div class="center_container">
    <input type="checkbox" id="bottom">
    <div class="body_container">
      <div class="content">
      </div>
    </div>
    <div class="terminal_container">
      <div class="content">
      </div>
    </div>
  </div>
</div>

С классами через jQuery

Это решение добавляет классы, когда оно переключает, отображает ли оно или нет, а затем устанавливает ширину с помощью CSS.

Я бы обычно использовал ширину всех элементов, используя проценты вместо пикселей, чтобы мне не пришлось использовать calc заявления.

$(".hideleft").click(() => {
  $(".left_container").toggle();
  $("body").toggleClass("left");
});

$(".hideright").click(() => {
  $(".right_container").toggle();
  $("body").toggleClass("right");
});

$(".hidebottom").click(() => {
  $(".terminal_container").toggle();
  $("body").toggleClass("bottom");
});
.container {
  width: 90%;
  height: 70%;
  border: 3px solid;
  position: absolute;
}

.header_container {
  width: 100%;
  height: 50px;
  background-color: #DDD;
}

.left_container {
  height: 100%;
  width: 20%;
  background: green;
  float: left;
  overflow: scroll;
}

.right_container {
  height: 100%;
  width: 20%;
  background: blue;
  float: right;
  overflow: scroll;
  display: none;
}

.center_container {
  width: auto;
  height: 100%;
  position: relative;
}

.body_container {
  background: red;
  overflow: scroll;
  position: absolute;
  top: 0;
  height: 100%
}

.terminal_container {
  height: 100px;
  width: 100%;
  overflow: hidden;
  background-color: black;
  color: white;
  position: absolute;
  bottom: 0;
}

.content {
  padding: 15px;
}

/* Layout */
.left .center_container {
  float: right;
  width: 80%;
}

.right .center_container {
  float: left;
  width: 80%;
}

.left.right .center_container {
  width: 60%;
}

.bottom .body_container {
  bottom: 100px;
  height: auto;
  width: 100%;
}
<body class="left">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <div class="right_container">
    <div class="content">
    MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>MENU ITEM RIGHT<br>
    </div>
  </div>
  <div class="left_container">
    <div class="content">
    MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>MENU ITEM LEFT<br>
    </div>
  </div>
  <div class="center_container">
    <div class="body_container">
      <header>
        <button class="hideleft">Toggle Left</button>
        <button class="hideright">Toggle Right</button>
        <button class="hidebottom">Toggle Bottom</button>
      </header>
      <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
      </div>
    </div>
    <div class="terminal_container" style="display: none">
      <div class="content">
      terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal terminal 
      </div>
    </div>
  </div>
</div>
</body>

Источник
Другие вопросы по тегам