web-dev-qa-db-fra.com

Comment limiter la largeur et la hauteur maximales à la taille de l'écran en CSS?

J'essaie de faire une galerie php et c'est pourquoi j'ai besoin d'un bon masque, où les images pourront être montrées plus tard ... Je veux que le masque ne soit pas plus grand que la taille de l'écran. Je veux dire, il ne doit pas y avoir de défilement et le <body> entier doit avoir uniquement la largeur et la hauteur des fenêtres du navigateur, de sorte que chaque objet enfant dans <body> soit limité à la taille de la trame du navigateur et sera réduit s'il déborde . J'ai essayé avec max-width et max-height sur le <body>, mais cela ne fonctionne pas.

Voici mon code:

index.html:

<!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>

style.css:

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

C'est à quoi ça ressemble encore - Je ne veux pas que la page soit plus grande que la fenêtre - cliquez ici pour voir la mauvaise version!

htmlcsslimitscreen-size
13
hans2020dieter

Si vous voulez que la hauteur soit exactement à 100% de l'écran de visualisation et identique à la largeur, utilisez 

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

.

div {
  background-color: blue;
  height: 100vh;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}
<div>hi</div>

18
k97513

Essayer:

html,
body {
  height: 100%;
}

body {
  overflow: hidden;
}

Savez-vous combien d'éléments enfants seront dans votre galerie? Si le nombre d'éléments est statique, vous pouvez simplement définir leurs dimensions dans CSS à l'aide des unités vw et vh. Aucun JavaScript n'est impliqué et les éléments ne pourraient jamais submerger votre corps.

3
Donny West

Je ne sais pas si cela est possible avec css, cela pourrait être . J'ai résolu le même problème avec javascript:

window.top.innerHeight;

obtient la hauteur disponible, les barres de menu exclues, etc. du groupe de discussion ..__Voyez ce que j’ai fait pour la hauteur, mon problème était que le pied de page devait être en bas même si le contenu était vide-> 

<!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>

recherchez cette fonction dans l'exemple ci-dessus ->

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
coban

Ma solution CSS est:

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

Pour rappel à mon futur moi:

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

Bien que cela soit complètement indépendant, pour les liens, vous pouvez utiliser quelque chose comme:

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
loxaxs