瀏覽器調整大小時如何正確調整div大小？

Question

假設我有下表：

<div style="padding:10px">
<table style="width:100%">
<tr><td style="width:10%">Jordan Roger</td><td style="width:100%"><div width="200px" style="background:red"></div></td></tr>
</table>
</div>

如何使用Javascript進行調整，以便無論何時調整瀏覽器大小時，200px的div始終會填充屏幕右側的空間（保留10px的填充）？ （高度可以保持不變，寬度優先。

注意：百分比不是div的選項。 通常我會使用100％之類的百分比，但是這不是一個選擇，因為我只能將div的寬度設置為以px為單位的特定值，而不能設置為帶有“ thediv.setSize（width，height）”的百分比。

如果可能的話，我正在考慮將以下內容作為執行此操作的一種潛在方法，但不知道如何正確利用它，因為200px div不會占據瀏覽器的整個高度和寬度，因為它位於表。

$(window).resize(function() 
{    
    mydiv.setSize($(document).width(), $(document).height()));   
});

如果有某種“正確”的方式，我應該使用這種方式...

Answer 1

您必須使用寬度百分比-即“相對”寬度。

---

編輯以反映變化的需求。

為什么不使用JS這樣設置樣式？ 如何在JavaScript中以百分比設置div的寬度？

另外，您也許可以將偵聽器綁定到： http : //api.jquery.com/resize/ ，它檢查頁面的寬度，並調用setSize函數。