设置 html 页面的最小高度
Posted
技术标签:
【中文标题】设置 html 页面的最小高度【英文标题】：set min-height of a html page 【发布时间】：2016-07-03 07:38:20 【问题描述】：当您尝试调整窗口大小时，我使用min-width 和min-height 设置网页的最小宽度和高度。
参见 sn-p blow。
我也将 html 放入 dropbox。最小宽度在 chrome 中而不在 IE 中工作，最小高度根本不起作用。我的代码有什么问题？任何帮助将不胜感激。
body
min-width: 330px; <!-- This only works in chrome not work in IE -->
min-height: 400px; <!-- This doesn't work at all. -->
fieldset
border:5px;
select
width: 100px;
input
width: 195px;
input, select
height: 30px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
table
width: 300px;
table, th, td
border: 1px solid grey;
border-collapse: collapse;
#powered
margin-left: 60px;
<html>
<head></head>
<body>
<div class="main">
<form id="form_converter" action="#">
<fieldset>
<label>For test, not integrated yet.</label>
<br>
<select id="select_currency1" onchange="currency1Changed()">
<option>USD</option>
<option>EUR</option>
<option selected="selected">SGD</option>
<option>JPY</option>
<option>CNY</option>
</select>
<input type="text" id="currency1" class="number">
<br>
<select id="select_currency2" onchange="currency2Changed()">
<option selected="selected">USD</option>
<option>EUR</option>
<option>SGD</option>
<option>JPY</option>
<option>CNY</option>
</select>
<input type="text" id="currency2" class="number">
<br>
<br>
<table>
<tr>
<th>Currency</th>
<th>Code</th>
<th>Value</th>
</tr>
<tr>
<td>SGD</td>
<td>SGD</td>
<td>1</td>
</tr>
<tr>
<td>USD</td>
<td>USD</td>
<td>0.7</td>
</tr>
<tr>
<td>EUR</td>
<td>EUR</td>
<td>0.6</td>
</tr>
<tr>
<td>JPY</td>
<td>JPY</td>
<td>82.063</td>
</tr>
<tr>
<td>CNY</td>
<td>CNY</td>
<td>4.7</td>
</tr>
</table>
</fieldset>
</form>
</div>
<body>
<html>【问题讨论】：
您是否要限制浏览器窗口的大小？ min-height 似乎在您的示例中按预期工作。 是的，我想限制浏览器窗口的大小。 【参考方案1】：我不认为完全可以限制用户调整窗口大小 - 请参阅 Setting minimum size limit for a window minimization of browser?。您可以通过弹出窗口强制它，但min-height 仅适用于 HTML 元素，而不适用于浏览器窗口本身。
可能有一个答案here 可能会有所帮助。
【讨论】：
【参考方案2】：不要直接设置body的宽高，以body的大小作为其他元素的参考。如果您想设置最小宽度或高度，只需使用容器即可。
body
width: 100%;
height: 100%;
.container
min-width: 60%;
min-height: 70%;
希望对你有帮助。
【讨论】：
【参考方案3】：在 CSS 中使用 @media
看看@media CSS at-rule。
您可以使用@media screen and (max-width: 330px) 和@media screen and (max-height: 400px) 并设置您的html 组件以使您的页面始终保持在330 像素和400 像素的高度。之后，如果您希望用户可以访问您的页面集overflow:auto 的屏蔽内容。
您无法阻止用户在此值下调整其浏览器的大小，但您的网页永远不会低于您选择的值。
CSS 可以是这样的：
body
width: 100%;
height: 100%;
@media screen and (max-width: 330px)
html
width: 330px;
overflow: auto;
@media screen and (max-height: 400px)
html
height: 400px;
overflow: auto;
【讨论】：
以上是关于设置 html 页面的最小高度的主要内容，如果未能解决你的问题，请参考以下文章