是否有更简洁/更短的方式来实现跨浏览器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}}
答案 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
来启用/禁用该样式块。
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;