Question

摘要：我的网站的body标签中有三个主要的div，前两个具有固定尺寸的元素。我希望第三格占据剩余宽度的90％并居中。

详细信息：我有一个在body标签内具有三个主要div的网站。 div和相关详细信息如下：

导航顶部：应跨页面的整个宽度，滚动时保持在原处（位置：粘性），并且高度为50px
nav-left：应跨越页面的整个高度（偏移50像素以位于＃nav-top下方），宽度应为50像素，并始终保持在同一位置（位置：固定）
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小提琴：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>

Answer 2

我看到的最好的方法是将导航栏和内容包装在Flexbox中：

HTML：

<div class="nav-top"></div>
<div class="flex">
  <div class="nav"></div>
  <div class="content"></div>
</div>

CSS：

*{
  margin: 0;
}

.nav-top{
  position: sticky;
  top: 0;
  height: 60px;
  background-color: green;
}


.flex{
  display: flex;
}

.nav{
  height: 100vh;
  width: 60px;
  background-color: red;
  /*here you most likely want to use position: sticky instead of your position: fixed*/
}

.content{
  width: 100%;
  margin: 0 5%;
  background-color: blue;
  margin: 0 auto;
}

https://codepen.io/anon/pen/vbNEzw

Answer 3

首先，使用flexbox在#container中包含＃nav-left和＃body-content。垂直拉伸#container，以确保您使用height: 100vh;捕获整个高度（当然要减去＃nav-top）。然后，要确保您的身体内容占用剩余宽度的90％，请设置margin-left: 5%;和margin-right: 5%;，这将使两侧的边距总计达到10％。

I edited your jsfiddle

如何在同级div剩余的剩余空间中使div居中

3 个答案: