如何使用JS填补可用空间？

Question

I've been searching the www for a solution dealing with the question: How can I use screen.availWidth or something like it in the second inner div of this fiddle to fill up the availiable space? Is it possible?

Thank you.

Answer 1

Possible indeed: http://jsfiddle.net/6fLDS/57/

The required JS:

var _otherDivsTotalWidth = 100;
window.onload = function WindowLoad() {
    var oDiv = document.getElementById("test");
    if (oDiv)
        oDiv.style.width = (document.body.scrollWidth - _otherDivsTotalWidth -30) + "px";
}

This requires you to hard code the total width of the other DIV elements, it's possible to read that in code.. shouldn't be complicated to add such thing to the above code.

Answer 2

This migth be what you want :

<div style="position: relative;">
    <div style="position: absolute; width:50px;border:1px solid red;left: 0;">1</div>
    <div id="test" style="border: green 1px solid; margin: 0 50px;">2</div>
    <div style="position: absolute; width:50px;border:1px solid red;right: 0; top: 0;">3</div>
</div>

Edit : your problem looks like the 3-column layout : http://css-discuss.incutio.com/wiki/Three_Column_Layouts