Question

当您尝试调整窗口大小时，我正在使用min-width和min-height来设置网页的最小宽度和高度。完整的HTML就像打击一样：

<html>
<head>
  <style>
  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;
  }
  </style>
<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>

我也将html放在dropbox中。最小宽度在Chrome中不在IE中工作，最小高度根本不起作用。我的代码出了什么问题？任何帮助将不胜感激。

Answer 1

我认为完全无法限制用户调整窗口大小 - 请参阅Setting minimum size limit for a window minimization of browser?。您可以使用弹出窗口强制它，但min-height仅适用于HTML元素，而不适用于浏览器窗口本身。

可能有帮助的答案here。

Answer 2

不要直接设置体宽或高度，使体的大小作为其他元素的参考。如果你想设置宽度或高度的最小值，只需使用一个容器。

body{
width : 100%;
height : 100%
}
.container{
min-width: 60%;
min-height: 70%
}

我希望这会对你有所帮助。

设置html页面的最小高度

2 个答案: