comment faire un plein écran div, et de les empêcher de taille à être changé par le contenu?

pour mon application web, je voudrais la div principale pour être en plein écran (à la fois la largeur et la hauteur = 100%), et quel que soit le contenu, je veux rester à cette taille. cela signifie que, si il n'y a pas beaucoup de contenu, il n'est pas interdit, et si il y a trop de contenu, il ne faut pas pousser cette div principale.

comment puis-je faire cela?

(je suis ok avec des hacks appliqué à cette div, tant qu'il va garder le contenu hack gratuit)

InformationsquelleAutor throwaway007 | 2010-07-18

css fullscreen

40

Ou même juste:
```
<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, le corps peut être définie comme.. 95%à 99% ou quelque chose du genre pour tenir compte de légères incohérences dans les marges, etc.)
- hey cela fonctionne très bien moi 🙂
- Ce n'est pas pour moi. (firefox)
- Devrait fonctionner correctement dans Firefox. J'ai été en utilisant la même méthode avec Firefox depuis des années.
- n'oubliez pas de html à côté du corps dans le css de la déclaration (c'est ce qui manquait pour moi)
InformationsquelleAutor lucideer

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

Stylebot.moi, c'est un lien mort, le domaine a été vendu.

InformationsquelleAutor JumpLink

9

Remarquez comment la plupart de ces ne peut être utilisé SANS un DOCTYPE. Je suis à la recherche de la même réponse, mais j'ai un DOCTYPE. Il y a une façon de le faire avec un DOCTYPE cependant, bien qu'il ne s'applique pas au style de mon site, mais il faudra travailler 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 c'est normalement utilisé avec un DOCTYPE, hauteur:100%; ne fonctionne que sans DOCTYPE

InformationsquelleAutor Zachary Anderson

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

</div>
</html>

InformationsquelleAutor Bob

2

- Je utiliser cette approche pour le dessin d'une superposition modale.
```
.fullDiv { width:100%; height:100%; position:fixed }
```
Je crois que la distinction ici est l'utilisation de position:fixe qui peuvent ou peuvent ne pas être applicables à votre cas d'utilisation.

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

Ensuite, le contenu modal peut vivre à l'intérieur de ce div, et tout contenu qui était déjà sur la page reste visible dans le fond, mais couverts par la superposition entièrement pendant le défilement.

InformationsquelleAutor Dustin Young
0
```
#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}
```
- Le right:0 et bottom:0 descripteurs sont inutiles; elles remplacent les top et left descripteurs. Ce utilisé pour me faire tout le temps; en CSS n'est pas comme Windows Forms ou XAML à cet égard.
- Mieux de vérifier votre travail à nouveau ensuite. - Je l'utiliser dans FF 3.6, Safari et IE et il fonctionne très bien dans tous les trois. C'est comment je fais un transparent "bouclier" fenêtre modale, popin boîtes de dialogue.
- Oh, et j'ai oublié de mentionner Chrome et Opera.
- Ça peut fonctionner, mais ces descripteurs sont inutiles si vous définissez la largeur et la hauteur correctement
- Vous avez déclaré que le droit:0 et en bas:0 descripteurs de remplacer en haut et à gauche. C'est incorrect. Ce qui ne fonctionnera pas, c'est du 100% de la largeur et de 100% de la hauteur, esp. si vous avez des frontières et/ou de rembourrage (et cross-browser implémentations). Ce que j'ai montré a été ce que j'ai été en s'appuyant sur des années sans problème, et le seul moyen que j'ai trouvé pour garantir que le style de l'objectif sera atteint dans tous les cas.
InformationsquelleAutor Robusto
0

Utiliser le code HTML
```
<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>
```
et utiliser les 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.

Espérons que cette aide!
- Vous aurez besoin de javascript pour maximiser la fenêtre du navigateur.
- merci, cela fonctionne bien, sauf un problème: - si un élément est en poussant wrapper (parce qu'il a 100% de la hauteur), papier d'emballage, la hauteur dépasse de l'écran, les résultats de débordement. si je supprime 100% de la hauteur de l'élément, alors il n'a pas de remplir wrapper.
- J'ai mis à jour le code. Check it out now!
- C'est faux. JS est tout à fait inutile pour cela. Le seul navigateur qui peut maintenant travailler à 100% est IE6, ce qui serait un cas-par-cas chose.
InformationsquelleAutor mattbasta

Vous devez vous connecter pour publier un commentaire.