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

Asked 27/3, 2016 at 23:8 Answered 23/5, 2019 at 17:48

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:

Kreager answered 27/3, 2016 at 23:8 Comment(0)

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>

Sibling answered 27/3, 2016 at 23:24 Comment(6)

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? – Kreager 27/3, 2016 at 23:43

What is the purpose of the div and the image? – Sibling 27/3, 2016 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. – Sibling 27/3, 2016 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 – Kreager 28/3, 2016 at 0:1

You can set the image height of height: 90vh, so it still has a 10% view height marginal room for spacing. – Sibling 28/3, 2016 at 0:4

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. – Fancied 6/4, 2019 at 17:56

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.

Urbane answered 27/3, 2016 at 23:23 Comment(2)

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? – Kreager 27/3, 2016 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. – Urbane 28/3, 2016 at 0:7

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

Larock answered 28/3, 2018 at 3:15 Comment(0)

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

Kwangju answered 23/5, 2019 at 17:48 Comment(0)

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

Pouched answered 27/3, 2016 at 23:38 Comment(3)

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 – Kreager 27/3, 2016 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. – Pouched 27/3, 2016 at 23:54

link I think this what you are looking for – Pouched 28/3, 2016 at 1:20

My CSS solution is:

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

Abroms answered 21/4, 2018 at 8:44 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags