浏览器正在调整大小的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组件的大小

回答

相关问题