修复了 3 列布局中的可切换页脚

Question

所以我试图创建一个 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）。

谁能帮我弄清楚底部面板的方法？

Answer 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>

修复了 3 列布局中的可切换页脚

Fixed toggleable footer in a 3 column layout

css

sticky-footer

没有类通过 jQuery

通过类到 jQuery

修复了 3 列布局中的可切换页脚

Fixed toggleable footer in a 3 column layout

css

sticky-footer

没有 类 通过 jQuery

通过 类 到 jQuery

没有类通过 jQuery

通过类到 jQuery