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

Ответ 1

Вы можете использовать вложенные элементы и отступы, чтобы получить левый и правый края на панели инструментов. Ширина по умолчанию элемента 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;
}

Ответ 2

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

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

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

Ответ 3

В то время как ответ Гуффа работает во многих ситуациях, в некоторых случаях вам может не потребоваться, чтобы левые и/или правые части отступов были родителями центра div. В этих случаях вы можете использовать контекст форматирования блоков в центре и поплавать в полях 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 и лучше отражает то, что на странице. Из-за этого границы, отступы и поля могут применяться обычно ко всем элементам (т.е. Эта "естественность" выходит за рамки стиля и имеет разветвления).

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

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

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

Ответ 4

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

Мы можем добиться этого с помощью гибкой коробки очень легко.

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

Для React/RN (по умолчанию "display" как flex и "flexDirection" в качестве столбца), в web css нам нужно будет указать контейнер тела или контейнер, содержащий их как отображение: "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,
    }

Ответ 9

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

Ответ 10

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

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

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