javascript - 使用纯 CSS，使一个 div 居中，直到它通过调整窗口大小进入侧边栏？

Question

我想创建一个网站，该网站具有一个固定宽度的居中列和一个附加的固定宽度侧边栏，即 position: fixed 在左侧。当窗口很大时，这很好用，但是当我调整窗口大小时，当窗口右侧有足够空间时它们开始重叠。例如:

我希望中心 div 位于中心直到它碰到侧边栏，此时我希望它有一个更流畅的响应设计，侧边栏从这里开始在调整窗口大小时将 div 向右推。例如:

我知道的唯一解决方案是这样的(使用 jQuery resize 事件并在窗口调整到足够小时向中心列添加一个类):

var SMALL_WINDOW_SIZE = 560;

function checkWindowSize() {
  var $content = $("#content");
  if ($(this).width() < SMALL_WINDOW_SIZE && !$content.hasClass("smallWindow")) {
    $content.addClass("smallWindow");
  } else if ($(this).width() >= SMALL_WINDOW_SIZE && $content.hasClass("smallWindow")) {
    $content.removeClass("smallWindow");
  }
}

$(document).ready(function() {
  checkWindowSize();
});

$(window).resize(function() {
  checkWindowSize();
});

#sidebar {
  background: orange;
  width: 100px;
  height: 200px;
  position: fixed;
  top: 10px;
  left: 10px;
}
#content {
  background: blue;
  width: 300px;
  height: 350px;
  margin: 0px auto;
}
.smallWindow {
  float: left;
  margin-left: 120px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='sidebar'></div>
<div id="content"></div>

我不禁觉得应该有一个纯 CSS 解决方案，或者使用更少或更多优雅的 JavaScript 的解决方案。有这种事吗？

Answer 1

这绝不是使用 CSS 实现预期效果的最佳方式，但它是我想要传达的使用 CSS 媒体查询调整布局背后的方法。

显然，如果这满足您的需求，您将需要调整数字/宽度以适合您的情况。

*, :before, :after{
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  position: relative;
  padding: 20px;
}

.sidebar, .main {
  padding: 20px
}

.sidebar {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 200px;
  background: goldenrod;
  color: white;
  height: 50vh;
}

.main {
  margin-left: 220px;
  background: mediumblue;
  color: white;
  height: 200vh;
}


@media (min-width: 1050px){
  .main{
    margin: 0 220px 0 220px;
  }
}

<div class="wrapper">
  <div class="sidebar">
    Sidebar
  </div>
  <div class="main">
    Main
  </div>
  </div>

» JSBin