仅在 CSS 中具有“3 列和 4 种状态”的网站

Question

该页面应包含三列：左侧菜单、内容和右侧菜单。两个菜单都应该能够隐藏（使用 Checkbox Hack），而内容则占据 space。整个页面的最大宽度应为 1000px。

我已经走了很长一段路，但现在我被困住了。三列导致 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>

Answer 1

我的解决方案：

div{scrollbar-width:none;}
label {padding:.5em;font-weight: bold; font-size:120%;}
body {max-width: 1200px;margin:0px;}
a{text-decoration: none;}
#header{position:fixed; width: 250px; height:140px;  background-color: #191970;}
#header a{color: #F8F8F8;font-size: 30pt; font-weight: normal; text-align: left; padding: 10px; font-family: "Bree Serif";}
#center_content{top:22px;
    /* position:absolute;top:0px;bottom:0px; max-width:700px;  */
    background-color: DarkRed;overflow-y:auto;}
#full_left_side{}
#left_menu{position:fixed;width:250px;top:140px;bottom:40px;overflow-y:auto; background-color: green;}
#footer{position:fixed;width:250px;bottom:0;height:40px; background-color: DarkViolet;}

#right_menu{position:fixed;width:250px;top:22px;bottom:0px;overflow-y:auto; background-color: DarkOrange;}


.hidden {position:absolute;right:100vw}
li{list-style:none; line-height: 1.3;}
ul{padding-left:10px;}

div.grid {display:grid;grid-template-rows:1fr 0 ;overflow:hidden;}
/* .grid_item{box-shadow:inset 0 0 0 1px;margin:0em;height:100%;overflow:hidden;} */

.label_left_content_right,.label_left_content, .label_content_right, .label_content{display:none;}

/* show all: LCR */
/* minmax(0, 1fr) */
#left_content_right:checked ~div{grid-template-columns:250px 1fr 250px;}
#left_content_right:checked ~div.grid>.grid_item>div.toggle_left>label.label_content_right{display:inline;}
#left_content_right:checked ~div.grid>.grid_item>div.toggle_right>label.label_left_content{display:inline;}

/* show: content & right CR */
#content_right:checked ~div{grid-template-columns:0px 1fr 250px;}
#content_right:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content_right{display:inline;}
#content_right:checked ~div.grid>.grid_item>div.toggle_right>label.label_content{display:inline;}

#content_right:checked ~div.grid>.grid_item>div#header{left:-300px;}
#content_right:checked ~div.grid>.grid_item>div#left_menu{left:-300px;}
#content_right:checked ~div.grid>.grid_item>div#footer{left:-300px;}


/* show: left & content LC */
#left_content:checked ~div{grid-template-columns:250px 1fr 0px;}
#left_content:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content_right{display:inline;}
#left_content:checked ~div.grid>.grid_item>div.toggle_left>label.label_content{display:inline;}

#left_content:checked ~div.grid>.grid_item>div#right_menu{right:-300px;}


/* show: content C */
#content:checked ~div{grid-template-columns:0px 1fr 0px;}
#content:checked ~div.grid>.grid_item>div.toggle_center>label.label_left_content{display:inline;}
#content:checked ~div.grid>.grid_item>div.toggle_center>label.label_content_right{display:inline;}

#content:checked ~div.grid>.grid_item>div#header{left:-300px;}
#content:checked ~div.grid>.grid_item>div#left_menu{left:-300px;}
#content:checked ~div.grid>.grid_item>div#footer{left:-300px;}

#content:checked ~div.grid>.grid_item>div#right_menu{right:-300px;}

<body>

  <span class="hidden">LCR</span><input class="hidden" type="radio" name="grid" id="left_content_right" checked>
  <span class="hidden">LC</span> <input class="hidden" type="radio" name="grid" id="left_content">
  <span class="hidden">CR</span> <input class="hidden" type="radio" name="grid" id="content_right">
  <span class="hidden">C</span>  <input class="hidden" type="radio" name="grid" id="content">

  <div class="grid">

    <div id="full_left_side" class="grid_item"><!-- left BOX -->

      <div class="toggle_left">
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_content_right" for="content_right">CR</label>
        <label class="label_content" for="content">C</label>
      </div>

      <div id="header">
        <a href="#" class="header_link">PageName</a>
      </div>

      <div id="left_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><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><li> item </li><li> item </li>
        </ul>
      </div>

      <div id="footer">
        <a href="#" class="footer_link">Footer1 </a>
        <a href="#" class="footer_link">Footer2 </a>
        <a href="#" class="footer_link">Footer3</a>
      </div>
    </div><!-- left BOX -->

    <div class="grid_item"><!-- center BOX -->
      <div class="toggle_center">
        <label>_</label>
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_left_content" for="left_content">LC</label>
        <label class="label_content_right" for="content_right">CR</label>
      </div>

      <div id="center_content">
        <h1>Content</h1>
        <p>
            Lorem ipsum dolor sit ame<br>t, consetetur sadi<br>pscing elitr, sed diam nonumy eirm<br>od tempor invidunt ut labore et<br>dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>          dolore magna aliquyam erat<br>, sed diam voluptua.<br> At vero eos et accusam et justo<br> duo dolores et ea rebum.<br>Stet clita kasd gubergren,<br> no sea takimata sa<br>nctus est Lorem ipsum dolor sit am<br>t. Lorem ipsum dolor sit am<br>et,consetetur sadipscing elitr, sed diam nonumy<br> eirmod tempor invidunt ut labore et dolore magna aliquyam erat,<br>sed diam voluptua. At ver<br>o eos et accusa<br>m et justo duo dolores et ea rebum. Stet clita kasd gubergren,<br>no sea takimata sanctus est Lorem ipsum <br>dolor sit amet.<br>
        </p>
      </div>
    </div><!-- center BOX -->

    <div class="grid_item"><!-- right BOX -->
      <div class="toggle_right">
        <label class="label_left_content_right" for="left_content_right">LCR</label>
        <label class="label_left_content" for="left_content">LC</label>
        <label class="label_content" for="content">C</label>
      </div>
      <div id="right_menu">
        <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><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><li> item </li><li> item </li>
        </ul>
      </div>
    </div><!-- right BOX -->

  </div> <!-- grid -->
</body>

仅在 CSS 中具有“3 列和 4 种状态”的网站

Website with "3 columns and 4 states" in CSS only

css

checkbox

calculated-columns