瀏覽器正在調整大小的HTML組件的大小

我正在一個頁面上，我正在顯示一些html組件（令人驚訝的是：P）。瀏覽器正在調整大小的HTML組件的大小

要求是，所有這些html組件的大小根據瀏覽器窗口重新調整大小或客戶端解析度如何變化而變化。

例如，如果我的瀏覽器窗口的大小減少了一半，我怎樣才能讓組件自動減少到一半。

任何指向這個的指針都會有幫助。

編輯：需要的是組件保持在相同的從左到右的順序，即如果需要引入水平滾動條。

來源

2011-07-18 kshitij

假設您想盡可能輕鬆地做到這一點，而無需使用JavaScript。在你的CSS確保任何你想重新大小的寬度和高度屬性是百分比，而不是像素。此外，如果您需要重新調整子組件的大小，那麼也需要一個百分比。

例如

如果這是你的HTML

當div容器是要自動調整大小

<div class="container"> 

    <h1> some heading</h1> 
    <p>some paragraph text</p> 

    <div class="childContainer"> 
     <p>some more text</p> 
    </div> 

</div>

在做到這一點的HTML組件您css

.container 
{ 
    width: 80%; 
} 

.someChildContainer 
{ 
    width: 50%; 
}

不是這個

.container 
{ 
    width: 800px; 
}

通過在本例中使用的比例，例如說你的總瀏覽器的寬度爲1000像素開始;容器類div將顯示爲800px，而childContainer類將爲400px。如果用戶將瀏覽器縮小到500px的寬度，則容器類將縮小到400px，並且childContainer將縮小到200px;

換句話說，任何子容器的百分比寬度都基於帶有父容器的當前值。如果沒有父容器，則百分比寬度與html body標籤相關，大多數情況下是整個瀏覽器窗口的寬度。

這是基於你的樣品

<html> 
<body> 

<style type="text/css"> 
    .alignLeft{ 
      float:left; 
     } 

    .container 
    { 
     width: 80%; 
     background-color:#ccc; 
     float: left; 
    } 

    .fixedContainer 
    { 
     width: 900px; 
     float: left; 
     background-color:#aaa; 

    } 

    table 
    { 
     width: 300px; 
     float: left; 

    } 
</style> 

<div class="container"> 

<div class="fixedContainer"> 

<table class="searchCriteria alignLeft" cellpadding="1%"> 

<tr> 
<td><label for="proposalRefNum">Proposal Id :</label></td> 
<td><input type="text" name="proposalRefNum" onchange="removeSearchResults()" class="searchControl" value="" id="proposalRefNum" title="Type the Proposal RefNum you are looking for"></td> 
</tr> 

    <tr> 
<td><label for="proposalName">Name :</label></td> 
<td><input type="text" name="Proposal Name" onchange="removeSearchResults()" value="" id="proposalName" class="searchControl" title="Type the Proposal description you are looking for"></td> 
</tr> 

<tr> 
<td><label for="proposalDescription">Description :</label></td> 
<td><textarea rows="2" name="Proposal description" onchange="removeSearchResults()" id="proposalDescription" class="searchControl" title="Type the Proposal description you are looking for"></textarea></td> 
</tr> 

<tr> 
<td><label for="proposalApplication">Application :</label></td> 
<td><select class="searchControl" name="application" id="proposalApplication" onchange="removeSearchResults()" title="Select the application for which you are searching the proposals"> 
    <option value="_ANY" selected="selected">ANY</option> 
</select></td> 
</tr> 

</table> 


<table class="searchCriteria alignLeft" cellpadding="10px"> 

<tr> 
<td><label for="proposalReleaseCandidateRefNum">Release Candidate Id :</label></td> 
<td><input type="text" name="releaseCandidateRefNum" onchange="removeSearchResults()" class="searchControl"value="" id="proposalReleaseCandidateRefNum" title="Type the release Candidate RefNum you are looking for"></td> 
</tr> 

<tr> 
<td><label for="proposalCreator">Creator :</label></td> 
<td><input type="text" name="Proposal creator" onchange="removeSearchResults()"value="" id="proposalCreator" class="searchControl" title="Creator of the proposals you are looking for"></td> 
</tr> 

<tr> 
<td><label for="proposalOwner">Owner :</label></td> 
<td><input type="text" name="Proposal Owner" onchange="removeSearchResults()"value="" id="proposalOwner" class="searchControl" title="Owner of the proposals you are looking for"></td> 
</tr> 

<tr> 
<td><label for="proposalLastUpdatedBy">LastUpdatedBy :</label></td> 
<td><input type="text" name="Proposal Last Updated By" onchange="removeSearchResults()"value="" id="proposalLastUpdatedBy" class="searchControl" title="Users who last updated the proposals you are looking for"></td> 
</tr> 

<tr> 
<td><label for="proposalStatus" >Status:</label></td> 
<td><select class="searchControl" onchange="removeSearchResults()" name="status" id="proposalStatus" title="Status of the proposals you are looking for"> 
    <option value="_ANY" selected="selected">ANY</option> 
</select></td> 
</tr> 
</table> 

</div> 
</div> 

</body> 
</html>

來源

2011-07-18 14:51:47 pat8719

我在這裏添加了我的示例html - http://jsfiddle.net/sKY7d/。我如何在這裏實現它，在這裏我沒有明確地設置任何組件的寬度。 – kshitij

@kshitij把一個包裝div放在你的桌子上，並將該div的寬度設置爲一個百分比我已經把基於你的樣本的完整樣本放到我的原始答案中 – pat8719

@kshitij同樣你會明智地用基於div的佈局替換你的表格佈局以獲得更清晰的標記和更可預測的行爲。通常應將表格保留爲實際爲表格數據的內容，例如電子表格，統計數據等的一部分 – pat8719

你會經常聽到這樣的在這裏標記：jQuery。有一個resize event，您可以附加一個函數來調整所有組件的大小，例如

$(window).resize(function() { 
    //resize the components. 
});

正如@ pat8719說，有高度和寬度比例只需將它們作爲你的CSS的百分比，這隻會是有用的，如果你想在某個閾值來改變字體/邊框的大小或有當屏幕尺寸太小時，看起來像是摺疊組件。

來源

2011-07-18 14:58:15 nwellcome

另外，如果您希望獲得更多花哨/複雜的組件重新調整大小，您將希望使用JavaScript作爲@nwellcome通常建議使用jQuery的優秀庫 – pat8719

瀏覽器正在調整大小的HTML組件的大小

回答

相關問題