Установка ширины div на 100% минус определенное количество пикселей

Question

Последние часы искал в сети, чтобы найти решение, но не смог найти, вот и я.

Мне нужна ширина div, равная 100% минус ширина left div.

Так что div слева от него остается той же ширины (390 пикселей), а другой div регулирует его размер в зависимости от разрешения.Я нашел решение, где он имеет фиксированную ширину div с обеих сторон, но просто не могу понять это.

Answer 1

Простое решение:

<div id="content">
    <div class="padder">

    </div><!-- .padder -->
</div>
<div id="sidebar">
    <div class="padder">

    </div><!-- .padder -->
</div>

CSS:

div#content {
    float: right;
    width: 100%;
}

div#content .padder {
    margin-left: 330px;
    padding: 0 30px 0 0;
}

div#sidebar {
    float: left;
    width: 300px;
    margin-top: -30px;
    padding-left: 30px;
    margin-right: -330px;
}

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

Answer 2

Этот тип расчета в настоящее время не поддерживается в CSS (конечно, не в Chromium 12 / Ubuntu 11.04), но в CSS 3 определена функция calc(), которая допускает такой тип поведения, используя простые математическиефункции:

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
  border: solid transparent; border-width: 2px 1px;
}
p:hover { border-color: yellow; }

(приведенный выше пример взят непосредственно из W3.org .)

Мои собственные (исчерпывающие) тесты показывают:

+----------------+-------------------+
|  Browser       |  Ubuntu 11.04     |
+----------------+-------------------+
|  Chromium  12  |  Fails            |
|  Firefox  5    |  Fails            |
|  Opera  11.10  |  Fails            |
+----------------+-------------------+

Приведенные выше результаты были получены с использованием названных браузеров и css calc() demo , код которого приведен ниже:

HTML:

<div id="box">This is the box.</div>

CSS:

#box {
    width: calc(100% - 20%);
    background-color: #f90;
    font-weight: bold;
    color: #fff;
    line-height: 2em;
    text-align: center;
    margin: auto;
}

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

Как указано clairesuzy , в комментариях:

[Взгляните] на caniuse он работает в Firefox , если вы используете width: -moz-calc(), но это все;)

И, действительно, в FirefОх 5 (Ubuntu 11.04) это работает (префиксы других поставщиков, похоже, ничего не делают для Opera или Webkit;к сожалению): Пересмотренная демонстрационная версия с префиксом поставщика .

Ссылка:

• Значения и единицы CSS3 .

Answer 3

<div id="left">...</div>
<div id="content">...<br> more content</div>

#left {float: left; width: 390px; background: #f76922;}
#content {overflow: hidden; background: #eee;}

плавает левый div и создает новый контекст форматирования блока из правого div (переполнение: скрытый - один из способов сделать это), таким образом, он займет оставшееся место

Пример Fiddle

Answer 4

Может быть, это не имеет прямого отношения к вопросу, но у меня была похожая проблема при расположении элементов в списке. Элемент фиксированной ширины находится справа от каждого элемента. Мне удалось решить это с помощью следующего подхода. Идея состоит в том, чтобы сбалансировать положительное значение padding-left с отрицательным значением margin-left, в то время как ширина установлена ​​на 100%:

.item {
  max-height: 40px;
}

.item-title {
  display: inline-block;
  height: 40px;
  width: 100%;
  margin-left: -70px;
  padding-left: 65px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* This one should be fixed-width. */
.item-params {
  width: 60px;
  height: 40px;
  float: right;
}

Answer 5

На самом деле в настоящее время нет способа сделать это с прямым CSS в браузерах других FireFox (см. Документы MDN ). Вы можете использовать javascript, чтобы сделать то же самое, но я бы посоветовал переосмыслить ваш макет.

РЕДАКТИРОВАТЬ: фактически IE 9 может справиться с этим, см. Документы MSDN . Yay для IE?