设置 HTML 页面的最小高度

set min-height of a html page

本文关键字：小高 高度 HTML 设置      更新时间：2023-09-26

当您尝试调整窗口大小时，我正在使用min-width和min-height来设置网页的最小宽度和高度。见片段吹。

我也把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但这仅适用于 HTML 元素，而不适用于浏览器窗口本身。

这里可能有一个可能会有所帮助的答案。

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

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

我希望这对你有帮助。

在 CSS 中使用 @media

看看@media CSS at rule。

您可以使用 html 组件的@media screen and (max-width: 330px)和@media screen and (max-height: 400px)设置，以保持页面始终高达 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;
  }
}
相关文章：