Come limitare la larghezza e l'altezza massime alle dimensioni dello schermo in CSS?

Sto cercando di creare una galleria php e questo è il motivo per cui ho bisogno di una buona maschera, in cui è possibile visualizzare le immagini in seguito. Voglio che la maschera non sia più grande della dimensione dello schermo. Voglio dire, non ci devono essere scrolling e l'intero <body> deve avere solo la larghezza e l'altezza delle finestre del browser, in modo che ogni oggetto figlio in <body> sia limitato alla dimensione del frame del browser e venga ristretto nel caso in cui trabocchi . Ho provato con max-width e max-height su <body>, ma non funziona.Come limitare la larghezza e l'altezza massime alle dimensioni dello schermo in CSS?

Ecco il mio codice:

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

Thats what it still looks like - I dont want the Page to be bigger than window - click here to see the wrong version!

fonte

2016-03-27 hans2020dieter

Prova:

html, 
body { 
    height: 100%; 
} 

body { 
    overflow: hidden; 
}

Sai quanti elementi bambino sarà nella tua galleria? Se il numero di elementi è statico, puoi semplicemente impostare le loro dimensioni in CSS usando le unità vw e vh. Nessun JavaScript coinvolto, e gli elementi non sarebbero mai in grado di traboccare il tuo corpo.

fonte

2016-03-27 23:23:18

Grazie anche a te, ma il tuo modo non è quello che sto cercando, perché è giusto, che con il tuo modo posso impedire lo scorrimento, ma c'è ancora un trabocco sul sito ... Voglio che il mio sito web prevenga da tali overflow, in modo che se un oggetto tenta di traboccare sarà ridotto a una dimensione adatta che non trabocca ... sai cosa intendo? – hans2020dieter

Modificata la mia risposta per suggerire il dimensionamento degli elementi figlio con vw e vh. Funzionerà se gli elementi della galleria sono statici ... se aggiungi o sottrai gli elementi dinamicamente, JavaScript sarà l'unico modo. –

Se si desidera che l'altezza sia esattamente il 100% della schermata di visualizzazione, e lo stesso con la larghezza, utilizzare

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>

fonte

2016-03-27 23:24:27 k97513

prima di tutto: grazie per la tua risposta veloce ... ma, scusa, questa risposta non mi aiuta molto, perché il tuo contenitore < div > potrebbe essere di dimensioni dello schermo, ma l'immagine al suo interno è grande per forzare un overflow ... in modo da avere di nuovo lo scorrimento che volevo impedire . Hai un'idea di come forzare il contenitore < div > al superamento della dimensione dello schermo? Intendo stabilire un limite su tutti gli oggetti nel contenitore < div > che non possono eccedere e quindi verranno ridotti a una dimensione adatta? – hans2020dieter

Qual è lo scopo del div e dell'immagine? – k97513

Se stai creando una galleria, non mettere l'immagine all'interno del div. Rendi il div un "coperchio" e rendi la posizione dell'immagine: assoluta'. Quindi posizionalo. Inoltre, se stai creando una galleria, imposta l'altezza massima: 90% 'o qualcosa del genere. – k97513

non sono sicuro se questo è possibile con i CSS, potrebbe essere. Ho risolto problema simile con javascript:

window.top.innerHeight;

ha l'altezza disponibile, barre di menu esclusi ecc del borwser. Vedi come ho fatto per l'altezza, il mio problema era che il piè di pagina deve essere in fondo, anche se il contenuto è stato a mani>

<!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 per questa funzione all'interno l'esempio precedente ->

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

fonte

2016-03-27 23:38:23 coban

ok, grazie ... Sto cercando di andare d'accordo con te idea ^^ perché, in realtà io ' m molto male a javascript ... Voglio dire, ho cercato un modo, senza javascript ... ma se non c'è modo di aggirare javascript, non può essere aiutato XD – hans2020dieter

Cerca di ottenere l'altezza disponibile e con, escludi tutti gli altri elementi e regola le dimensioni della tua foto al resto dell'altezza e della larghezza disponibili Btw, non sono nemmeno un webmaster, all'interno di StackOverflow puoi trovare molti esempi di JavaScript. – coban

ok, grazie! :) – hans2020dieter

Come limitare la larghezza e l'altezza massime alle dimensioni dello schermo in CSS?

risposta

Problemi correlati