html - 引导行在左侧和右侧具有固定宽度的列

Question

我的 fixed-left、fixed-right 和 content 的 css 必须是这样的，即左右 div 是固定的，内容 div 是最大宽度减去两个固定宽度 div 的宽度并且 div 不即使屏幕宽度小于 (fixed-left.width + fixed-right.width) 也不要将一个滚动到另一个下方吗？

<div class="row" id="row01">
  <div class="fixed-left">
    <div class="fixed-left-a">001</div>
    <div class="fixed-left-b">Item 1</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
    </div>
  </div>
  <div class="fixed-right">
    <span>A</span>
  </div>
</div>

<div class="row" id="row02">
  ...
</div>

我想在主要内容中使用 bootstrap 3 网格，但每一行都有固定的属性，不需要左右部分的大小可变。

编辑:

我希望输出看起来像附件中的图像。

Answer 1

您可以使用calc 来设置content 的width

.fixed-left, .fixed-right {
  position: fixed;
  width: 100px;
  top: 0;
  bottom: 0;
}
.fixed-left {
  left: 0;
  background: yellow;
}
.fixed-right {
  right: 0;
  background: purple;
}
.content {
    background: pink;
    width: calc(100% - 200px);
    margin: 0 auto;
    height: 100vh;
}

<div class="row" id="row01">
  <div class="fixed-left">
    <div class="fixed-left-a">001</div>
    <div class="fixed-left-b">Item 1</div>
  </div>
  <div class="content">
    <div class="row">
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
      <div class="col-xs-4 col-md-3">1,234</div>
    </div>
  </div>
  <div class="fixed-right">
    <span>A</span>
  </div>
</div>

查看整页中的代码段并尝试调整浏览器窗口的大小