All geek questions in one place

How to limit the maximum width and height to the screen size in CSS?

I am trying to make a php gallery, and therefore I need a good mask where photos can be shown later. I want the Mask to not be larger than the screen size. I mean that there should be no scrolling, and the whole <body> needs to have only the width and height of the browser windows so that each child object in the <body> limited by the frame size of the browser and be reduced. down if it is crowded. I tried with max-width and max-height for <body> , but this does not work.

Here is 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 is 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 how it looks:

screenshot

+15
source share
6 answers

To set the height and width to 100% of the size of the window (viewport), 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>
+22
source

Try:

 html, body { height: 100%; } body { overflow: hidden; }

Do you know how many children will be in your gallery? If the number of elements is static, you can simply set their sizes in CSS using the vw and vh units. There is no JavaScript involved, and elements can never overflow your body.

+3
source

I'm not sure if this is possible with css, maybe. I solved a similar problem with javascript:

 window.top.innerHeight;

gets the available height, excludes the menu, etc. Borner. See how I did it at the height, my problem was that the footer should be at the bottom, even if the content is 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>

find this function in 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'; }
+1
source

As a reminder for my future:

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

Although this is completely unrelated, for links you can 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; }
0
source

My CSS solution:

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

It works great. This will prevent your image from becoming too large, and also keep its proportions.

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

Source: https://habr.com/ru/post/1245878/

More articles:


All Articles