【发布时间】：2020-11-23 07:10:39
【问题描述】：
页面应该有三栏：左侧菜单、内容和右侧菜单。两个菜单都应该能够被隐藏（使用 Checkbox Hack），而内容则占用空间。整个页面的最大宽度应为 1000 像素。
我已经走了很长一段路，但现在我陷入了困境。 三列导致 4 种状态：
- 左 - 内容 - 右 (250 - 500 - 250)
- 左 - 内容 (250 - 750)
- 内容 - 正确 (750 - 250)
- 内容 (1000)
对于 1 和 2，内容必须比隐藏列的宽度大，为此我使用“calc(100% + 250px)”。
但是，当两个页面列都被隐藏时，内容会占据页面的整个宽度，我该怎么做呢？
此外，页面宽度限制不起作用，但这还不是那么重要。
:root {
--darkgrey: darkgrey;
--almostwhite: #fcfcfc;
--almostwhite_font: #fcfcfc;
--lightgrey: lightgrey;
--blue: blue;
--darkgrey_font: #404040;
--lightgrey_1: #e3e3e3;
}
.red {
color: red;
padding: 15px;
}
.toggle-links {
margin: auto;
width: 50%;
}
/* ═══════════════════════════════════╝ Wrapper ╚══════════ */
body {
max-width: 960px;
margin-left: 0px;
padding-left: 0px;
}
/* ═══════════════════════════════════╗ Wrapper ╔══════════ */
/* ═══════════════════════════════════╝ Header ╚══════════ */
.header {
position: fixed;
/* display: block; */
width: 250px;
height: 120px;
left: 0px;
top: 0px;
padding: 0px;
color: var(--almostwhite_font);
/* z-index: 200; */
background-color: var(--darkgrey);
}
a.header_link {
position: absolute;
top: 5px;
left: 25px;
font-size: 30pt;
font-weight: normal;
text-align: left;
color: var(--almostwhite);
}
.header .searchbox {
position: fixed;
margin-top: 65px;
padding-left: 15px;
}
/* ═══════════════════════════════════╗ Header ╔══════════ */
/* ═══════════════════════════════════╝ three columns ╚══════════ */
.left_column {
box-sizing: border-box;
position: fixed;
background: var(--darkgrey);
overflow: scroll;
scrollbar-width: none;
}
.center_column {
box-sizing: border-box;
position: fixed;
overflow: scroll;
scrollbar-width: none;
/* margin: 0 auto; */
border: solid 1px darkred;
}
.right_column {
box-sizing: border-box;
position: fixed;
background: var(--darkgrey);
overflow: scroll;
scrollbar-width: none;
}
/* ═══════════════════════════════════╝ Small View ╚══════════ */
.left_column {
height: 100%;
width: 250px;
left: -250px;
top: 120px;
}
.center_column {
height: 100%;
width: calc(100% - 0px);
left: 0px;
top: 0px;
padding: 25px 10px 10px 10px;
}
.right_column {
height: 100%;
width: 250px;
left: calc(100% + 250px);
top: 0px;
padding-top: 120px;
}
/* ═══════════════════════════════════╗ Small View ╔══════════ */
/* ═══════════════════════════════════╝ Medium View ╚══════════ */
@media screen and (min-width: 900px) {
.left_column {
height: 100%;
width: 250px;
left: 0px;
top: 120px;
}
.center_column {
height: 100%;
width: calc(100% - 250px);
left: 250px;
top: 0px;
padding: 25px 10px 10px 10px;
}
.right_column {
height: 100%;
width: 250px;
left: calc(100% + 250px);
top: 0px;
padding-top: 120px;
}
}
/* ═══════════════════════════════════╗ Medium View ╔══════════ */
/* ═══════════════════════════════════╝ Large View ╚══════════ */
@media screen and (min-width: 1140px) {
.left_column {
height: 100%;
width: 250px;
left: 0px;
top: 120px;
}
.center_column {
height: 100%;
width: calc(100% - 500px);
left: 250px;
top: 0px;
padding: 25px 10px 10px 10px;
}
.right_column {
height: 100%;
width: 250px;
left: calc(100% - 250px);
top: 0px;
padding-top: 120px;
}
}
/* ═══════════════════════════════════╗ Large View ╔══════════ */
/* ═══════════════════════════════════╗ three columns ╔══════════ */
/* ═══════════════════════════════════╝ Switches ╚══════════ */
input.hidden {
display: none;
}
div.left_column {
display: block;
}
input[type=checkbox]#toggle_left_column:checked~div.left_column {
display: none;
}
input[type=checkbox]#toggle_left_column:checked~div.center_column {
left: 0px;
width: calc(100% - 250px);
}
div.right_column {
display: block;
}
input[type=checkbox]#toggle_right_column:checked~div.right_column {
display: none
}
input[type=checkbox]#toggle_right_column:checked~div.center_column {
left: 250px;
width: calc(100% - 250px);
}
/* ═══════════════════════════════════╗ Switches ╔══════════ */<body>
<!-- switches -->
<input type="checkbox" id="toggle_left_column" class="hidden">
<input type="checkbox" id="toggle_right_column" class="hidden">
<!-- switches -->
<div class="left_column">
<div class="header">
<a href="header_link" class="header_link">mySite</a>
<div class="searchbox">
<form><input type="search" /></form>
</div>
</div>
<div id="menu">
<h3>Menu 1</h3>
<ul>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
</ul>
</div>
</div>
<!-- left_column -->
<div class="right_column">
<div id="menu2">
<h3>Menu 2</h3>
<ul>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
</ul>
</div>
</div>
<!-- right_column -->
<div class="center_column">
<!-- just for testing -->
<div class="toggle-links">
<label class="red" for="toggle_left_column">toggle left side</label>
<label class="red" for="toggle_right_column">toggle right side</label>
</div>
<!-- just for testing -->
<div id="content">
<h2>Content</h2>
<p></p>
</div>
</div>
<!-- center_column -->
</body>【问题讨论】：
-
你能澄清一下吗："content 1和2，内容必须比隐藏列的宽度大，我用的是"？
-
...这是您尝试做的吗？ codepen.io/gc-nomade/pen/wvWLwaK 。网格在这里很有用。
-
@G-Cyrillus，我在每个状态后添加了像素宽度。感谢您的链接，我从未使用过网格，但我会看看它。
-
我已经尝试过“网格”并且我已经非常接近我的想法了：codepen.io/koljal/pen/jOWjmZp@G-Cyrillus 但仍然让我恼火的是 HTML 验证器说：
Element box not allowed as child of element div in this context. (Suppressing further errors from this subtree.)I找不到解决方案，忽略它？否则，请查看我的代码并批评它，谢谢。 -
即使有效也不是 html 元素，请使用任何常规块元素，如 <div class="box">。这是一个简单的例子
标签： css checkbox calculated-columns