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

Ответ 1

Элементы уровня блока, такие как <div> автоматически заполнит 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/

Ответ 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);

Ответ 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 из конечного результата (они перекрываются в примере, потому что ширина границы не включена в ширину).

Ответ 4

Вы можете добиться этого без изменения вашей разметки с использованием свойства 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/

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

Ответ 5

Если вы не знаете, насколько большой будет фиксированная часть, вы можете использовать хак 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;
}

Ответ 6

Попробуйте установить положение так:

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

Ответ 7

Вы можете поместить 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/

Ответ 8

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

Ответ 9

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

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