How to limit max width and height to screen size in CSS?

Question

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 <body> needs to have just the width and height of the browser windows, so that every child object in <body> is limited to the frame-size of the browser and will be shrunk down if it overflows. I've tried with max-width and max-height on the <body>, but it doesn't work.

Here are the contents of my index.html file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="mother">
    <div id="header">
      <div id="back-link">
        <a href="../">Home</a>
      </div>
      <div id="prev">
        <a href="">next picture</a>
      </div>
      <div id="next">
        <a href="">previous picture</a>
      </div>
      <div id="headline">
        <p class="h2">Our Galery</p>
      </div>
    </div>

    <!-- Content -->
    <div id="container-bild">
      <img src="./bilder/P1130079.JPG" id="img-bild" />
    </div>
  </div>
</body>
</html>

Here are the contents of my style.css file:

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

Here is a screenshot of what it looks like:

kzhao14 · Answer 1 · 2019-03-07T21:29:34.640

84

To set the height and width to be 100% of the window (viewport) size, use:

height: 100vh;//100% view height
width: 100vw;// 100% view width

.

div {
  background-color: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
}

<div>some content here</div>

edited Mar 07 '19 at 21:29

answered Mar 27 '16 at 23:24

kzhao14

2,470
14
21

first of all: thanks for your fast answer... but, sorry, this answer doesn´t help me very much, because your < div > container may be screen size, but the image in it is big to forces an overflow ... so that you have again the scrolling I wanted to prevent from. Have you got an idea how to force the < div > container from exceeding the screen windows-size? I mean to make a limit on all objekts in the < div > container that they can't to exceed and thus they will be shrinked to a fitting size? – hans2020dieter Mar 27 '16 at 23:43
What is the purpose of the div and the image? – kzhao14 Mar 27 '16 at 23:44
If you're making a gallery, don't put the image inside the div. Make the div a "cover", and make the image `position: absolute`. Then position it. Also, if you're making a gallery, then make the image's `max-height: 90%` or something like that. – kzhao14 Mar 27 '16 at 23:45
yes ... thank you, I mean ... I just mean ... if you try to say < div > container is 1920x1080px than there's no problem ... no objekt in it will overflow my limit of 1920x1080px ... but what if you say 100% x 100% of screen? Then it doesn't matter to my browser what screensize my windows has ... the < div > will then overflow without limit ... do you understand what I meant? And thank you for your idea with 90% max-height ^^ If nothing helps, I think I have to be happy with that XD – hans2020dieter Mar 28 '16 at 00:01
You can set the image height of `height: 90vh`, so it still has a 10% view height marginal room for spacing. – kzhao14 Mar 28 '16 at 00:04
This solved a different but unrelated problem for me. I had a flyout that inserts a full-width row in a table, but my buttons were off the right side if the table was wide enough to require a horizontal scrollbar. I managed to fix it with max-width: 97vw, which is inexact but good enough. Thanks. – Wade Hatler Apr 06 '19 at 17:56

Donny West · Answer 2 · 2016-03-28T00:06:37.807

6

Try:

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

Do you know how many child elements will be in your gallery? If the number of elements is static, you could simply set their dimensions in CSS using vw and vh units. No JavaScript involved, and the elements would never be able to overflow your body.

edited Mar 28 '16 at 00:06

answered Mar 27 '16 at 23:23

Donny West

710
3
6

Thank you too, but your way is also not what I'm looking for, because it's right, that with your way I can prevent scrolling, but there is still an overflow on the site ... I want my website to prevent from such overflows, so that if an object tries to overflow it will be shrinked down to a fitting size that does't overflow ... do you know what I mean? – hans2020dieter Mar 27 '16 at 23:47
Edited my answer to suggest sizing child elements with vw and vh. This will work if gallery elements are static...if you're adding or subtracting elements dynamically, then JavaScript will be the only way. – Donny West Mar 28 '16 at 00:07

score 6 · Answer 3 · answered Mar 28 '18 at 03:15

As a reminder for my future self:

.book {
    margin: auto;
    width: 100vh;
    max-width: 100vw;
    min-width: 500px;
}

Though this is completely unrelated, for links, you might want to use something like:

a[href^="#"] {
    text-decoration: none;
    color: black;
    background: url("http://www.yaml.org/spec/1.2/term.png") no-repeat bottom right;
}
a[href^="#"]:hover {
    text-decoration: underline;
    color: blue;
    background: none;
}

score 3 · Answer 4 · answered May 23 '19 at 17:48

3

This works great. This will keep your image from growing too large width wise and also keep its proportions.

img {
    max-width: 100%;
    height: auto;
}

answered May 23 '19 at 17:48

Goddard

2,863
31
37

score 2 · Answer 5 · answered Mar 27 '16 at 23:38

I'm not sure if this is possible with css, it could be. I have solved similar issue with javascript:

window.top.innerHeight;

gets the available height, excluded menubars etc. of the borwser. See how I did for the height, my issue was that the footer should be at the bottom even if content was empty->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>C-Driver Manager</title>
<meta name="keywords" content="Aygit,Device,Driver,Surucu,Download,Indir,yedekle,Unknown,Bilinmeyen,Backup,Back-up,stuurprogramma,apparaat,windows,w7,w8,w10,multilanguage,tool,free,gratis,ucretsiz">
<meta name="description" content="Windows 7/8/10 Device indentify, Driver backup, Driver info">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="images/favicon.ico">
</head>

<body onResize="resizecontainer();">
    <div class="divtop"> 
        <div class="divtopcontainer">
            <div class="divlogo">

            </div>
            <div class="divHmenu">
                <style>
    .mnuHorizontal
    {
        list-style:none;
    }
    .mnuHorizontal li
    {
        float:left;
    }

    .mnuHorizontal .activemnu a,.mnuHorizontal li a:hover
    {
        background:#00B7EF;
        border-radius:5px;
        color:white;
    }


    .mnuHorizontal li a
    {
         display:inline-block;
         text-decoration:none;
         padding:5px 12px;
         text-align:center;
         font-weight:bold;
         color:#020042;
    }

    </style>

<ul class="mnuHorizontal">
    <li id="index.php"><a href="index.php">HOME</a></li>
    <li id="features.php"><a href="features.php">FEATURES</a></li>
    <li id="download.php" class="activemnu"><a href="download.php">DOWNLOAD</a></li>
    <li id="contact.php"><a href="contact.php">CONTACT</a></li>
</ul>  
            </div>
        </div>
    </div>

    <div class="divblueline"></div>

    <div class="divcontainer">
<div style="float:left">
    <h2>What is C-Driver Manager</h2>
    C-Driver Manager is a simple tool that;
    <ul>
        <li>displays information about your devices</li>
        <li>identify unrecognized devices by windows</li>
        <li>Backups your devices driver</li>
    </ul>

<h2>Why C-Driver Manager?</h2>
<ul>
    <li>No installation needed</li>
    <li>No adware</li>
    <li>No spyware</li>
    <li>Absolutely freeware</li>
</ul>
</div>
<div>
    <img alt="" src="images/devmgr5.jpg" height="430" width="700">
</div>

</div>

    <div class="divblueline"></div>
    <div class="divbottom">
        <div id="chmx">
        </div>
    </div>
</body>
    <script>
        for (i=0;i<document.getElementsByClassName('mnuHorizontal').item(0).children.length; i++)
        {
            if (document.getElementsByClassName('mnuHorizontal').item(0).children[i].id ==
                "index.php")

            {
                document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = 'activemnu';
            }
            else
            {
                document.getElementsByClassName('mnuHorizontal').item(0).children[i].className = '';
            }
        }

        resizecontainer();

        function resizecontainer()
        {
            avh     =   window.top.innerHeight;
            dbh     =   document.getElementsByClassName('divbottom').length *
                        document.getElementsByClassName('divbottom').item(0).clientHeight;

            dbt     =   document.getElementsByClassName('divtop').length    *
                        document.getElementsByClassName('divtop').item(0).clientHeight;

            dbbl    =   document.getElementsByClassName('divblueline').length   *
                        document.getElementsByClassName('divblueline').item(0).clientHeight;

            decrh = dbh + dbt + dbbl;

            document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
        }
    </script>
</html>

look for this function inside the example above ->

function resizecontainer()
        {
            avh     =   window.top.innerHeight;
            dbh     =   document.getElementsByClassName('divbottom').length *
                        document.getElementsByClassName('divbottom').item(0).clientHeight;

            dbt     =   document.getElementsByClassName('divtop').length    *
                        document.getElementsByClassName('divtop').item(0).clientHeight;

            dbbl    =   document.getElementsByClassName('divblueline').length   *
                        document.getElementsByClassName('divblueline').item(0).clientHeight;

            decrh = dbh + dbt + dbbl;

            document.getElementsByClassName('divcontainer').item(0).style.minHeight = (avh - decrh) + 'px';
        }

okay, thank you ... I'm trying to get along with youre idea ^^ because, actually I'm very bad at javascript ... I mean I looked for a way, without javascript ... but if theres no way around javascript, it can't be helped XD — hans2020dieter, Mar 27 '16 at 23:53
Try to get your available height and with, exclude all other elements and adjust the size of your picture to the rest of available height and width Btw, I am also not a webmaster, inside stackoverflow u can find a lot of javascript examples. — coban, Mar 27 '16 at 23:54
[link](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) I think this what you are looking for — coban, Mar 28 '16 at 01:20

score 1 · Answer 6 · answered Apr 21 '18 at 08:44

1

My CSS solution is:

position: absolute;
width: 100%;
height: 100%;
overflow: hidden;

answered Apr 21 '18 at 08:44

Kibernetik

2,947
28
35

How to limit max width and height to screen size in CSS?

6 Answers6

Linked