title: How to limit max width and height to screen size in CSS?
body: <p>I'm trying to make a php gallery and thats why I need a good Mask, where the pictures later can be shown.
  I want the Mask not to be bigger than screen-size. I mean, there must be no scrolling and the whole <code>&lt;body&gt;</code> needs to have just the width and height of the browser windows, so that every child object in <code>&lt;body&gt;</code> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with <code>max-width</code> and <code>max-height</code> on the <code>&lt;body&gt;</code>, but it doesn't work.</p>
  
  <p>Here are the contents of my <code>index.html</code> file:
  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="mother"&gt;
      &lt;div id="header"&gt;
        &lt;div id="back-link"&gt;
          &lt;a href="../"&gt;Home&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="prev"&gt;
          &lt;a href=""&gt;next picture&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="next"&gt;
          &lt;a href=""&gt;previous picture&lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="headline"&gt;
          &lt;p class="h2"&gt;Our Galery&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- Content --&gt;
      &lt;div id="container-bild"&gt;
        &lt;img src="./bilder/P1130079.JPG" id="img-bild" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here are the contents of my <code>style.css</code> file:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
    max-width: 100%;
    max-height: 100%;
  }
  
  /* mother-container */
  div#mother {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
  }
  
  /* main-container */
  #container-bild {
    max-width: 100%;
    max-height: 100%;
  }
  
  /* picture in main-container */
  #img-bild {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #280198;
  }
  </code></pre>
  
  <p>Here is a screenshot of what it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/Vj49i.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/Vj49i.gif" alt="screenshot"></a></p>