set min-height of a html page

user_1544790 0
Viewed 4270

I'm using min-width and min-height to set the minimal width and height of a web page, when u try to resize the window. See snippet blow.

also i have put the html in dropbox. the min-width works in chrome not in IE, the min-height doesn't work at all. What's wrong with my code? Any help would be appreciated.

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>

css html jquery javascript
3 Answers

Use @media in CSS

Take a look at @media CSS at-rule.

You can use @media screen and (max-width: 330px) and @media screen and (max-height: 400px) and set with of your html component to keep you're page always up to 330px with and 400px height. After, if you want users can access the masked content of your page set overflow:auto.

You can't prevent user resize his browser under this values but you're web page will never go under the values you select.

The CSS can look like that :

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;
  }
}
user_116308060
Related