CSS 布局 3 个可切换的列 1 个可切换的类似终端的页脚

Question

是否有更清晰/更短的方法来使用跨浏览器 CSS 并仅使用 javascript 来切换类来实现相同的结果？

我正在尝试创建一个像上面那样的布局，但我从来没有像我在这里所做的那样尝试绝对设置所有内容，所以我不知道可能有什么缺点。

$(".left-col-content > .content").append(() => {
  return "left-col<br>".repeat(350);
});
$(".right-col-content > .content").append(() => {
  return "right-col<br>".repeat(350);
});
$(".terminal-row > .content").append(() => {
  return "terminal<br>".repeat(350);
});

$(".body-col-content > .content").append(() => {
  return "content<br>".repeat(350);  
});

$(".body-col-header > .content").append(() => {

  left_btn = $("<button>Toggle Left</button>").click(() => {
    $(".left-col").toggle();
    $(".body-col").toggleClass("left-hidden");
  });

  right_btn = $("<button>Toggle Right</button>").click(() => {
    $(".right-col").toggle();
    $(".body-col").toggleClass("right-hidden");
  });

  terminal_btn = $("<button>Toggle Terminal</button>").click(() => {
    $(".terminal-row").toggle();
    $(".main-row").toggleClass("terminal-hidden");
  });


  buttons = $("<div></div>")
    .append(left_btn)
    .append(right_btn)
    .append(terminal_btn);

  return buttons;

});

.container {
  height: 100%;
}

.container .main-row {
  height: inherit;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 50px;
  left: 0px;
}

.container .main-row.terminal-hidden {
  bottom: 0px;
}

.container .main-row .left-col {
  width: 150px;
  left: 0px;
  top: 0px;
  bottom: inherit;
  position: absolute;
  background-color: yellow;
}

.container .main-row .left-col .left-col-header {
  height: 50px;
  width: inherit;
  position: inherit;
  background-color: orange;
}

.container .main-row .left-col .left-col-content {
  width: inherit;
  top: 50px;
  bottom: 0px;
  position: inherit;
  overflow-y: scroll;
}

.container .main-row .left-col .left-col-content .content {
  padding: 15px;
}

.container .main-row .right-col {
  width: 150px;
  right: 0px;
  top: 0px;
  bottom: inherit;
  position: absolute;
  background-color: yellow;
}

.container .main-row .right-col .right-col-header {
  height: 50px;
  width: inherit;
  position: inherit;
  background-color: orange;
}

.container .main-row .right-col .right-col-content {
  width: inherit;
  top: 50px;
  bottom: 0px;
  position: inherit;
  overflow-y: scroll;
}

.container .main-row .right-col .right-col-content .content {
  padding: 15px;
}

.container .main-row .body-col {
  right: 150px;
  left: 150px;
  top: 0px;
  bottom: inherit;
  position: absolute;
  background-color: green;
}

.container .main-row .body-col.right-hidden {
  right: 0px;
}

.container .main-row .body-col.left-hidden {
  left: 0px;
}

.container .main-row .body-col .body-col-content {
  width: 100%;
  top: 50px;
  bottom: 0px;
  position: inherit;
  overflow-y: scroll;
}

.container .main-row .body-col .body-col-content .content {
  padding: 25px;
}

.container .main-row .body-col .body-col-header {
  height: 50px;
  width: 100%;
  position: inherit;
  background-color: red;
}

.container .terminal-row {
  height: 50px;
  width: 100%;
  bottom: 0px;
  right: 0px;
  position: absolute;
  background-color: black;
  color: green;
  overflow-y: scroll;
}

.container .terminal-row .content {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <div class="main-row">
    <div class="left-col">
      <div class="left-col-header">
        <div class="content">
        </div>
      </div>
      <div class="left-col-content">
        <div class="content">
        </div>
      </div>
    </div>
    <div class="right-col">
      <div class="right-col-header">
        <div class="content">
        </div>
      </div>
      <div class="right-col-content">
        <div class="content">
        </div>
      </div>
    </div>
    <div class="body-col">
      <div class="body-col-header">
        <div class="content">
        </div>
      </div>
      <div class="body-col-content">
        <div class="content">
        </div>
      </div>
    </div>
  </div>
  <div class="terminal-row">
    <div class="content">
    </div>
  </div>
</div>

Answer 1

这还没有完全完成，但会给你一个框架，你可以用它来工作。正如您在代码片段中看到的，我使用了很少使用的 <style> 属性。标签即id在javascript中.disabled .

由于样式标签使用并遵守 W3 “全局 HTML 属性” 规则 w3schools.com: HTML style tag你可以简单地给他们一个 #id并使用简单的 javascript 行将它们启用/禁用。

正如您在代码片段中所见，我已将所有主要元素定义为 Flexbox 容器以及一些非常通用的 top/bottom/center/middle类来获得你想要/需要的结构，为你留出所有你可能需要的空间来处理特定的东西，比如间距、字体大小，创建你自己的#id，等等。

当您需要更多信息时，请回复。 (如果您确实得到了所需的答案，请不要忘记关闭问题。)

在代码中您可以看到我首先使用 display: none 禁用了列和抽屉, 每个都有自己的 style堵塞。然后我用 display: flex 定义它们可见(因为它们是 flexbox div's )并根据要求通过切换 enabled/disabled 来启用/禁用该样式 block 使用简单的 JavaScript。

function toggleStyle(id) { var el = document.getElementById(id); el.disabled = !el.disabled }

<style>
body                        { margin: 0 }

header,footer,main,section,item,
div                         { display: flex }

header,footer,section,div   { flex-direction: row    }
main,item                   { flex-direction: column }
header,footer,item,div      { flex-wrap: wrap }


header                      { min-height: 3.5rem } /* 3.5 * 16px */
footer                      { min-height: 2.5rem }

main                        { height: 100vh; justify-content: space-between }
section                     { height: 100%;  justify-content: space-between }
.drawer                     { align-content: space-between }


.left,.right                { width: 12.5% }
.center                     { flex: 1 }
.middle                     { flex: 1; width: 100% }
.top,.bottom                { height: 2rem; width: 100% }

.center-col                 { flex: 1 }

* { outline: 1px dashed }
</style>

<style>.drawer.left   { display: none }</style>
<style>.drawer.bottom { display: none }</style>
<style>.drawer.right  { display: none }</style>

<style id="stl-left-col" >.drawer.left   { display: flex }</style>
<style id="stl-terminal" >.drawer.bottom { display: flex }</style>
<style id="stl-right-col">.drawer.right  { display: flex }</style>

<body>
<main>
    <header>
        <input type="button" onclick="toggleStyle('stl-left-col')"  value="left column">
        <input type="button" onclick="toggleStyle('stl-terminal')"  value="terminal row">
        <input type="button" onclick="toggleStyle('stl-right-col')" value="right column">
    </header>

    <section class="content">
        <item class="drawer left">
            <div class="top"   >left top   </div>
            <div class="middle">left middle</div>
            <div class="bottom">left bottom</div>
        </item>

        <item class="content center">
            <div class="top">main top</div>
            <div class="middle">main middle
            </div>
            <div class="bottom">main bottom</div>
        </item>

        <item class="drawer right">
            <div class="top"   >right top   </div>
            <div class="middle">right middle</div>
            <div class="bottom">right bottom</div>
        </item>
    </section>
    
    <footer class="drawer bottom">some footer</footer>
</main>
</body>