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

时间:2017-07-14 15:41:17

标签: css layout

是否有更简洁/更短的方式来实现跨浏览器CSS的相同结果并仅使用javascript来切换类?

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

.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>
{{1}}

1 个答案:

答案 0 :(得分:1)

尚未完全完成,但会为您提供一个可以使用的框架。 正如您在代码段中看到的那样,我使用<style>标记的极少使用的属性,即id和javascript .disabled

由于样式标记使用并符合W3 &#39;全局HTML属性&#39; 规则w3schools.com: HTML style tag,您只需向他们提供#id并将其切换为/使用简单的javascript行禁用。

正如您在Snippet中所看到的,我已经将所有主要元素定义为Flexbox容器,其中包含一些非常通用的top/bottom/center/middle类,以获得您想要/需要的结构,从而为您提供特定内容所需的所有空间像间距一样,字体化创建你自己的#id&#39; s等。

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

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

&#13;
&#13;
function toggleStyle(id) { var el = document.getElementById(id); el.disabled = !el.disabled }
&#13;
<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>
&#13;
&#13;
&#13;