html - 如何在兄弟 div 留下的剩余空间中居中 div

Question

总结:我在网站的 body 标签中有三个主要的 div，前两个有一个固定尺寸的元素。我希望第三个 div 占据剩余宽度的 90% 并居中。

详情:我有一个网站，其 body 标签中包含三个主要的 div。 div和相关细节如下:

1. nav-top:应横跨页面的整个宽度，滚动时保持原位(位置:粘性)，高度为 50px
2. nav-left:应跨越页面的整个高度(偏移 50px 位于#nav-top 下方)，宽度为 50px，并始终保持在同一位置(位置:固定)
3. body-content:它的整个盒子模型应该包含在#nav-top 和#nav-left 留下的剩余空间内。在这个剩余空间中，它应该占据宽度的 90% 并水平居中

#body-content 是我遇到问题的 div，盒子模型从窗口边缘开始，实际上在#nav-left 下方。

我觉得这应该是一个很容易解决的问题，但我正在努力让它按预期工作。这个网站需要有响应元素，但现在我什至无法解决这个问题。

* {
  padding: 0;
  margin: 0;
}

#nav-top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 50px;
  margin-bottom: 20px;
  background-color: DodgerBlue;
}

#nav-left {
  position: fixed;
  top: 50px;
  width: 50px;
  height: 100%;
  background-color: Silver;
}

#body-content {
  background-color: Tomato;
  color: white;
  width: 90%;
  margin: auto;
}

<div id="nav-left">
</div>
<div id="nav-top">
</div>
<div id="body-content">
  <div id="breadcrumb">You are here: Home</div>
  <div class="jumbotron">
    <h1>Software v2</h1>
    <p class="lead">Software v2 is the new version of the site!</p>
  </div>
  <div class="content-row">
    <div class="col-33">
      <h2>Fun!</h2>
      <p>Improved for more fun!</p>
    </div>
    <div class="col-33">
      <h2>Challenging!</h2>
      <p>Improved to be more challenging!</p>
    </div>
    <div class="col-33">
      <h2>Share it!</h2>
      <p>New features to share your best moments!</p>
    </div>
  </div>
  <hr>
  <footer>
    <p class="copyright">2019</p>
  </footer>
</div>

JS fiddle :https://jsfiddle.net/ubizvi/bq1zcp7v/19/

Answer 1

您让浏览器为您计算边距:

margin-left: calc((10% + 50px) / 2);
margin-right: calc((10% - 50px) / 2);

* {
  padding: 0;
  margin: 0;
}

#nav-top {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 50px;
  margin-bottom: 20px;
  background-color: DodgerBlue;
}

#nav-left {
  position: fixed;
  top: 50px;
  width: 50px;
  height: 100%;
  background-color: Silver;
}

#body-content {
  background-color: Tomato;
  color: white;
  width: 90%;
  margin: auto;
  margin-left: calc((10% + 50px) / 2);
  margin-right: calc((10% - 50px) / 2);
}

<div id="nav-left">
</div>
<div id="nav-top">
</div>
<div id="body-content">
  <div id="breadcrumb">You are here: Home</div>
  <div class="jumbotron">
    <h1>Builder v2</h1>
    <p class="lead">Software v2 is the new version of the site!</p>
  </div>
  <div class="content-row">
    <div class="col-33">
      <h2>Fun!</h2>
      <p>Improved for more fun!</p>
    </div>
    <div class="col-33">
      <h2>Challenging!</h2>
      <p>Improved to be more challenging!</p>
    </div>
    <div class="col-33">
      <h2>Share it!</h2>
      <p>New features to share your best moments!</p>
    </div>
    <div class="col-33">
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  <hr>
  <footer>
    <p class="copyright">2019</p>
  </footer>
</div>