Как заполнить 100% оставшейся ширины

Question

Есть ли какая-нибудь работа вокруг, чтобы сделать что-то вроде этой работы, как ожидалось? Хотелось бы, чтобы было что-то подобное width:remainder; или width:100% - 32px;.

width: auto; не работает.

Я думаю, что единственный возможный способ - это работать с отступами / полями, отрицательными значениями, или с плавающей точкой, или с некоторыми взломами HTML-тегов. Я попытался также показать: блок ;.

Мне нравится получать тот же результат, что и без таблиц http://jsfiddle.net/LJGWY/

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="display:inline; width: (100%-100px); border: 3 solid green;">Fill</div>
    <div style="display:inline; width: 100px; border: 3 solid blue;">Fixed</div>
</div>

Answer 1

Элементы уровня блока, такие как

, автоматически заполнят 100% доступной ширины. Если вы поместите один из них вправо, другой заполнит оставшееся место.

<div style="height: 100px; border: 3px solid red;" id="container">
  <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
  <div style="border: 3px solid green;">Fill</div>
</div>

http://jsfiddle.net/5AtsF/

Answer 2

Для тех, кто смотрит на это сейчас, есть новый метод css-свойства, называемый calc, который может выполнять это гораздо более гибко.

<div class="container">
    <div class="fixedWidth"></div>
    <div class="variableWidth"></div>
</div>

.fixedWidth{
width:200px;
}
.variableWidth{
width:calc(100%-200px);
}

Как предостережение, это не очень портативно, и поддержка мобильных устройств ограничена. IOS 6+ и andriod 4.4 я верю. Хотя поддержка настольных ПК значительно лучше, IE 9.0 +.

http://caniuse.com/calc

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

window.addEventListener('resize', function resize(){
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    child.style.width = parseInt(parent.offsetWidth - 200) + "px"; //200 being the size of the fixed size element
}, false);

Answer 3

Это должно сработать для вас:

<div style="position: absolute; width: 100%; height: 100px; border: 3px solid red;" id="container">
    <div style="float: right; width: 100px; border: 3px solid blue;">Fixed</div>
    <div style="display: block; margin-right: 100px; border: 3px solid green;">Fill</div>
</div>

См. JsFiddle

Это предполагает, что вы собираетесь удалить границы 3px из конечного результата(они перекрываются в примере, потому что ширина границы не включена в ширину).

Answer 4

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

<div class="container">
  <div class="fixedWidth"></div>
  <div class="variableWidth"></div>
</div>

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.fixedWidth {
    flex: 1;
}

.variableWidth {
    flex: 9999;
}

Answer 5

Вы можете получить это без изменения разметки, используя свойство display:table для этого:

.parent{
    position: absolute;
    left:0;
    right:0;
    height: 100px;
    border: 3px solid red;
    display:table;
}
.fill{
    margin-right: 100px;
    border: 3px solid green;
    display:table-cell;
    width:100%;
}
.fixed{
    width: 100px;
    border: 3px solid blue;
    display:table-cell;
}

Проверьте пример в реальном времени без horizontal scrollbar

http://jsfiddle.net/WVDNe/5/

Другой пример, но лучше, проверьте это:

http://jsfiddle.net/WVDNe/6/

примечание: это не работает в IE7 и ниже

Проверьте это также

http://jsfiddle.net/LJGWY/4/

Работает во всех браузерах 1024 *

Answer 6

Если вы используете CSS, одним из простых решений может быть использование следующего кода внутри div:

div{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

Answer 7

вы можете использовать стиль таблицы.создать div со стилем таблицы и подэлементами, будь то стили ячейки таблицы

текст метки

Answer 8

Вы можете поместить fixed div в fill div.

<div id="container">
    <div>Fill
        <div>Fixed</div>
    </div>
</div>

CSS

#container{
    position:absolute;
    width:90%;
    height:100px;
    border:3px solid red;
}

#container div{
    height:95%;
    border:3px solid green;
    width:100%;
}

#container div div{
    height:95%; 
    width:100px;
    border:3px solid blue;
    float:right;
}

Пример: http://jsfiddle.net/EM8gj/3/

Answer 9

Попробуйте установить позицию так:

<div style="position: absolute; width: 100%; height: 100px; border: 3 solid red;" id="container">
    <div style="position:absolute; left: 0; top: 0; right: 100px; border: 3 solid green;">Fill</div>
    <div style="position:absolute; top: 0; right: 0; width: 100px; border: 3 solid blue;">Fixed</div>
</div>