Ширина div 100% минус фиксированное количество пикселей

Хотя ответ Guffa работает во многих ситуациях, в некоторых случаях вы можете не захотеть, чтобы левая и / или правая части заполнения были родительскими для центрального div. В этих случаях вы можете использовать контекст форматирования блока по центру и перемещать блоки заполнения влево и вправо. Вот код

HTML:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

Я считаю, что эта иерархия элементов более естественна по сравнению с вложенными вложенными div и лучше отражает то, что находится на странице. Из-за этого границы, отступы и поля могут применяться ко всем элементам обычным образом (то есть: эта «естественность» выходит за рамки стиля и имеет разветвления).

Обратите внимание, что это работает только с div и другими элементами, которые имеют свойство «заполнить 100% ширины по умолчанию». Входные данные, таблицы и, возможно, другие потребуют от вас обернуть их в контейнер div и добавить еще немного CSS для восстановления этого качества. Если вам не повезло оказаться в такой ситуации, свяжитесь со мной, и я откопаю css.

jsfiddle здесь: jsfiddle.net/RgdeQ

Наслаждаться!

Вы можете использовать Flexbox макет. Вам необходимо установить flex: 1 для элемента, который должен иметь динамическую ширину или высота для flex-direction: row and column соответственно.

Динамическая ширина:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

Вывод:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

Динамическая высота:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

Вывод:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

Обычный способ сделать это, как описано Guffa, - вложенные элементы. Немного грустно добавлять дополнительную разметку, чтобы получить нужные для этого крючки, но на практике div-обертка здесь или там никому не повредит.

Если вам необходимо сделать это без дополнительных элементов (например, когда у вас нет контроля над разметкой страницы), вы можете использовать box-sizing, который имеет довольно приличную, но не полную или простую поддержку браузера. Хотя, наверное, веселее, чем полагаться на сценарии.

Может, я веду себя глупо, но разве таблица не является очевидным решением?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

Другой способ, который я придумал в хроме, еще проще, но, черт возьми, это хитрость!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

Только это должно заполнить оставшуюся часть строки по горизонтали, как это делают ячейки таблицы. Однако у вас возникают некоторые странные проблемы, когда он превышает 100% своего родителя, хотя установка ширины в процентное значение исправляет это.

Этого очень легко добиться с помощью flex-box.

Если у нас есть три элемента, такие как Header, MiddleContainer и Footer. И мы хотим придать фиксированную высоту верхнему и нижнему колонтитулам. тогда мы можем написать так:

Для React / RN (по умолчанию это 'display' как flex и 'flexDirection' как столбец) в веб-CSS нам нужно будет указать контейнер тела или контейнер, содержащий их, как display: 'flex', flex-direction: 'column' как показано ниже:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

что, если бы ваш обертывающий div был на 100% и вы использовали padding для количества пикселей, тогда, если padding # должен быть динамическим, вы можете легко использовать jQuery для изменения количества отступов при срабатывании ваших событий.

У меня была аналогичная проблема, когда я хотел разместить баннер в верхней части экрана с одним изображением слева и повторяющимся изображением справа до края экрана. В итоге я решил это так:

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

Ключом была правильная бирка. Я в основном указываю, что хочу, чтобы он повторялся от 131 пикселей слева до 0 пикселей справа.

В некоторых случаях вы можете использовать настройки полей, чтобы эффективно указать «100% ширины минус N пикселей». См. Принятый ответ на этот вопрос.