How to fill 100% of remaining width

2019-02-12 06:51发布

Is there any work around to do something like this work as expected? I wish there were something like that width:remainder; or width:100% - 32px;.

width: auto; doesn't works.

I think the only way possible is working around with paddings/margins, negative values, or float, or some html tags hack. I tried also display:block;.

I like to get the same result as this, without tables http://jsfiddle.net/LJGWY/

enter image description here

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

8条回答
叛逆
2楼-- · 2019-02-12 07:19

You can acheive this without change your markup with use display:table property for this:

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

Check the live example with no horizontal scrollbar

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

Another example but in better way check this:

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

note: it not work in IE7 & below

Check this also

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

It's work in all browsers.

查看更多
小情绪 Triste *
3楼-- · 2019-02-12 07:20

You could put the fixed div inside the the 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;
}

Example: http://jsfiddle.net/EM8gj/3/

查看更多
Animai°情兽
4楼-- · 2019-02-12 07:23

This should do for you:

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

See the jsFiddle

This is assuming you're going to be removing the 3px borders from the end result (they overlap in the example because border width is not included in the width).

查看更多
再贱就再见
5楼-- · 2019-02-12 07:23

Try setting the position like so:

<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>
查看更多
The star\"
6楼-- · 2019-02-12 07:24

Block level elements like <div> will fill 100% of the available width automatically. If you float one of them to the right, the other will fill the remaining space.

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

查看更多
再贱就再见
7楼-- · 2019-02-12 07:27

If you don't know how big will be the fixed part you can use the flex 9999 hack.

<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;
}
查看更多
登录 后发表回答