基于可用空间的中心元素水平

Question

在没有使用javascript的情况下，可以将元素水平地放在所有可用空间上吗？

我知道如果我做了margin: 0 auto;，它就会把它放在屏幕上。但是，由于我有一个侧边栏，所以我希望内容集中在剩余空间上，而不是屏幕空间。

我知道使用javascript很容易实现，但是我不知道是否可以使用纯css来实现它。(https://jsfiddle.net/dxb2rr8k/)

Javascript代码如下所示(https://jsfiddle.net/a5n59bxn/)：

$(window).on('resize', function () {
  centerContent();
});

function centerContent() {
  var sidebarWidth = $('.sidebar').width();
  var contentWidth = $('.content').width();
  var windowWidth = $(window).width();

  $('.content').css('margin-left', (windowWidth / 2) - sidebarWidth);
}

Answer 1

​

html, body, .wrap {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.sidebar {
  width: 100px;
  background: red;
  height: 100%;
  min-height: 100%;
  float: left;
}

.content {
  overflow: hidden;
  background: blue;
  margin: 0 auto;
  width: 300px;
}

<div class="wrap">
  <div class="sidebar"></div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eveniet, iure maiores optio provident quod illum deleniti saepe error corporis molestiae reiciendis omnis, sapiente perspiciatis dolore nesciunt unde, eligendi quisquam reprehenderit. Corporis accusamus beatae, quisquam voluptas deleniti, nam libero dolore, odio maiores blanditiis error sit ad earum iusto quia distinctio.
    </p>
  </div>
</div>

​