logo标签列表

设置HTML页面的最小高度

javascriptjqueryhtmlcss
5
我使用min-width和min-height来设置网页的最小宽度和高度，在调整窗口大小时生效。请参见以下片段。
同时，我将HTML文件放在了Dropbox中。在Chrome浏览器中，min-width可以正常工作，但是在IE浏览器中无法生效；而min-height则根本不起作用。我的代码出了什么问题？感谢任何帮助。 

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>

你是否试图限制浏览器窗口的大小？根据你的示例，最小高度似乎按预期起作用了。 - tempranova
是的，我想限制浏览器窗口的大小。 - chancyWu
3个回答
4
我认为无法完全限制用户调整窗口大小 - 详见此处。您可以用弹出窗口来强制限制，但min-height只适用于HTML元素而非浏览器窗口本身。
可能这里的回答有所帮助。
0

在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;
  }
}
0

不要直接设置body的宽度或高度，将body的大小作为其他元素的参考。如果您想设置宽度或高度的最小值，只需使用容器即可。

body {
  width: 100%;
  height: 100%;
}

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

希望这能对你有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接