web-dev-qa-db-fra.com

comment faire une division en plein écran, et empêcher la taille de changer de contenu?

pour mon application web, je voudrais que la div principale soit en plein écran (largeur et hauteur = 100%), et quel que soit le contenu, je veux qu'elle reste à cette taille. cela signifie que s'il n'y a pas beaucoup de contenu, cela ne devrait pas diminuer, et s'il y a trop de contenu, cela ne devrait pas Pousser cette div principale.

comment puis-je faire ceci?

(Je vais bien avec les hacks appliqués à cette div, tant que le contenu restera sans hack)

cssfullscreen
35
throwaway007

Ou même simplement:

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

(html, body peut être paramétré sur like .. 95% -99% ou une valeur similaire pour tenir compte de légères incohérences dans les marges, etc.)

37
lucideer
#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
15
JumpLink

Notez que la plupart d'entre eux ne peuvent être utilisés que SANS DOCTYPE. Je cherche la même réponse, mais j'ai un DOCTYPE. Cependant, il existe un moyen de le faire avec un DOCTYPE, bien que cela ne s'applique pas au style de mon site, mais cela fonctionnera sur le type de page que vous souhaitez créer:

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

Maintenant, cela a été mentionné plus tôt, mais je voulais juste préciser que ceci est normalement utilisé avec un DOCTYPE, height: 100%; ne fonctionne que sans DOCTYPE

9
Zachary Anderson
<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>
3
Bob
#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}
0
Robusto

J'utilise cette approche pour dessiner une superposition modale.

.fullDiv { width:100%; height:100%; position:fixed }

Je crois que la distinction ici est l'utilisation de position: fixed qui peut ou non être applicable à votre cas d'utilisation.

J'ajoute aussi z-index:1000; background:rgba(50,50,50,.7);

Ensuite, le contenu modal peut vivre dans cette div et tout contenu déjà présent sur la page reste visible en arrière-plan, mais entièrement recouvert par la superposition lors du défilement.

0
Dustin Young

Utilisez le HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

et utilisez le CSS:

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

Assurez-vous que le code HTML est dans l'élément racine.

J'espère que cela t'aides!

0
mattbasta