начальный ряд с фиксированной шириной столбцов слева и справа

Question

Что мой 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>

Я хочу использовать сетку начальной загрузки 3 в основном содержимом, но у меня есть фиксированные атрибуты каждой строки, которые не требуют, чтобы левая и правая части имели переменный размер.

Edit:

Я хочу, чтобы вывод выглядел как прикрепленное изображение.

Answer 1

вы устанавливаете поля для контента margin: 0 100px;, как это.

Здесь 100px - ваша фиксированная ширина элемента.

* {
  margin: 0;
  padding:0;
  box-sizing:border-box;
}
.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: 100%;
    margin: 0 100px;
    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>

Answer 2

https://stackoverflow.com/a/29532261/2193381 предлагает очень простое решение, которое работает. Это не тот подход, который я имел в виду, и он может иметь непредвиденные последствия, но, тем не менее, интересен.

Короче говоря, pull-left и pull-right фиксированная ширина деления перед установкой центрального плавающего значения ширины.

Answer 3

Вы можете использовать calc для установки width из content

.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>

посмотрите фрагмент в full-page и попробуйте изменить размер окна браузера