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

Question

Как я могу получить следующую структуру без использования таблиц или JavaScript? Белые границы представляют ребра элементов div и не имеют отношения к вопросу.

Размер области посередине будет меняться, но он будет иметь точные значения пикселей, и вся структура должна масштабироваться в соответствии с этими значениями. Чтобы упростить его, мне нужен способ установить ширину «100% - n px» для делителей верхнего-среднего и нижнего-среднего уровней.

Буду признателен за чистое кросс-браузерное решение, но в случае, если это невозможно, CSS-хаки подойдут.

Вот бонус. Другая структура, с которой я боролся, и в итоге я использую таблицы или JavaScript. Это немного отличается, но вводит новые проблемы. Я в основном использовал его в оконной системе на основе jQuery, но я бы хотел, чтобы макет не использовался в скрипте и управлял размером только одного элемента (среднего).

Answer 1

Новый способ, с которым я только что наткнулся: css calc():

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

Источник: css width 100% минус 100px

Answer 2

Вы можете использовать вложенные элементы и отступы, чтобы получить левый и правый край на панели инструментов. По умолчанию ширина элемента div равна auto, что означает, что он использует доступную ширину. Затем вы можете добавить отступ к элементу, и он по-прежнему не выходит за пределы доступной ширины.

Вот пример, который вы можете использовать для размещения изображений в виде левого и правого закругленных углов, а также центрального изображения, которое повторяется между ними.

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}

Answer 3

Хотя ответ Гуффы работает во многих ситуациях, в некоторых случаях вы можете не захотеть, чтобы левая и / или правая часть отступа была родительской для центрального элемента 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% ширины». Входные данные, таблицы и, возможно, другие потребуют от вас обернуть их в контейнерный блок и добавить немного больше CSS для восстановления этого качества. Если вам не повезло оказаться в такой ситуации, свяжитесь со мной, и я откопаю css.

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

Наслаждайтесь!

Answer 4

Вы можете использовать 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>

Answer 5

Может быть, я тупой, но разве здесь не очевидное решение?

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

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

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

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

Answer 6

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

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

Answer 7

Мы можем добиться этого, используя flex-box очень легко.

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

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

    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,
    }

Answer 8

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

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 пикселя справа.

Answer 9

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

Answer 10

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