Ширина Div 100% мінус фіксована кількість пікселів

Як я можу досягти наступної структури без використання таблиць чи JavaScript? Білі рамки являють собою краї дівок і не стосуються питання.

Розмір області в середині буде змінюватися, але він буде мати точні значення пікселів, і вся структура повинна масштабуватися відповідно до цих значень. Щоб спростити це, мені знадобиться спосіб встановити ширину "100% - n px" до знаків верхньої, середньої та нижньої середини.

Я вдячний за чисте крос-браузерне рішення, але у випадку, якщо це неможливо, хаки CSS зроблять.

Ось бонус. Інша структура, з якою я боровся, і в кінцевому підсумку використовує таблиці або JavaScript. Це трохи інакше, але вводить нові проблеми. Я в основному використовував його в системі вікон на основі jQuery, але я хотів би утримати макет поза сценарієм і контролювати лише розмір одного елемента (середній).

Ви можете використовувати вкладені елементи та накладки, щоб отримати лівий і правий край на панелі інструментів. Ширина 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;
}

Новий спосіб, на який я щойно натрапив: csscalc() :

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

Джерело: ширина css 100% мінус 100px

Хоча відповідь Гуффи працює у багатьох ситуаціях, у деяких випадках ви можете не бажати, щоб лівий та / або правий шматки прокладки були батьком центрального діва. У цих випадках ви можете використовувати контекст блокування форматування блоків у центрі та плавати дивами з підкладкою ліворуч та праворуч. Ось код

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

Я відчуваю, що ця ієрархія елементів є більш природною порівняно з вкладеними вкладеними дивами та краще відображає те, що на сторінці. Через це межі, прокладки та запаси можуть бути застосовані нормально до всіх елементів (тобто: ця «природність» виходить за межі стилю і має розгалуження).

Зауважте, що це працює лише на діви та інші елементи, які поділяють його властивість "заповнити 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>

Звичайний спосіб зробити це так, як окреслено Гуффою, вкладеними елементами. Трохи сумно, що потрібно додати додаткову розмітку, щоб отримати потрібні для цього гачки, але на практиці тут обов`язок із обгортки або нікому не зашкодить.

Якщо ви повинні зробити це без додаткових елементів (наприклад, коли ви не маєте контролю над розміткою сторінки), ви можете використовувати розмір поля , який має досить пристойну, але не повну або просту підтримку браузера. Напевно, веселіше, ніж сподіватися на сценарій.

Можливо, я німий, але хіба тут не очевидне рішення?

<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% від його батьківського, встановивши ширину на відсоткове значення, однак це виправляє.

Ми можемо досягти цього за допомогою флекс-боксу дуже легко.

Якщо у нас є три елементи, такі як Header, MiddleContainer і Footer. І ми хочемо надати деяку фіксовану висоту Header and Footer. тоді ми можемо написати так:

Для React / RN (типовими значеннями є 'display' як flex та 'flexDirection' як стовпець), в веб-css нам потрібно буде вказати контейнер body або контейнер, що містить їх як 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%, а ви використовували набивання для піксельної суми, то, якщо # для прокладки потрібно бути динамічним, ви можете легко використовувати 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 пікселів". Дивіться прийняту відповідь на це питання .