comment faire un div en plein écran, et empêcher la taille d'être changé par le contenu?

pour mon application Web, je voudrais que la div principale soit en plein écran (à la fois largeur et hauteur = 100%), et quel que soit le contenu, je veux qu'il reste à cette taille. cela signifie que s'il n'y a pas beaucoup de contenu, il ne devrait pas rétrécir, et s'il y a trop de contenu, il ne devrait pas pousser ce div principal.comment faire un div en plein écran, et empêcher la taille d'être changé par le contenu?

comment puis-je faire cela?

(je suis ok avec hacks appliqués à cette div, tant qu'il gardera le contenu pirater sans)

Source

2010-07-18 throwaway007

Utilisez le code HTML

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

et utiliser 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.

Espérons que cela aide!

Source

2010-07-18 16:09:15 mattbasta

Vous aurez besoin de javascript pour faire agrandissez la fenêtre du navigateur. –

merci, cela fonctionne bien, sauf un problème: - si un élément pousse l'encapsuleur (parce qu'il a 100% de hauteur), la hauteur de l'encapsuleur dépasse l'écran, entraîne un débordement. Si je supprime 100% de hauteur de l'élément, alors il ne remplit pas l'emballage. – throwaway007

@ throwaway007: J'ai mis à jour le code. Vérifiez-le maintenant! – mattbasta

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 réglé aimer .. 95% -99% ou quelque pour tenir compte de légères incohérences dans les marges, etc.)

Source

2010-07-18 16:17:59 lucideer

hey cela fonctionne bien moi :) –

Ce n'est pas pour moi. (firefox) –

@ TomášZato: Cela devrait fonctionner correctement dans Firefox. J'utilise la même méthode avec Firefox depuis des années. – TheCarver

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

</div> 
</html>

Source

2010-07-18 16:18:00 Bob

#fullDiv { 
    position: absolute; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    overflow: hidden; /* or auto or scroll */ 
}

Source

2010-07-18 16:29:19 Robusto

Les descripteurs 'right: 0' et' bottom: 0' sont inutiles; ils remplaceront les descripteurs 'top' et' left'. Cela m'avait habitué tout le temps; CSS n'est pas comme Windows Forms ou XAML à cet égard. – mattbasta

@mattbasta: Mieux vaut vérifier à nouveau votre travail. Je l'utilise dans FF 3.6, Safari et IE et ça marche très bien dans les trois. C'est comme ça que je fais une "fenêtre de protection" transparente pour les boîtes de dialogue modal popin. – Robusto

@mattbasta: Oh, et j'ai oublié de mentionner Chrome et Opera. – Robusto

Notez que la plupart d'entre elles ne peuvent être utilisées que SANS DOCTYPE. Je cherche la même réponse, mais j'ai un DOCTYPE. Il y a une façon de le faire avec un DOCTYPE cependant, même si elle ne concerne pas le style de mon site, mais il 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, c'était mentionné précédemment, mais je voulais juste préciser que cela est normalement utilisé avec un DOCTYPE, hauteur: 100%; ne fonctionne que sans DOCTYPE

Source

2012-06-27 17:16:18

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

Testé sur putlocker: http://stylebot.me/styles/4035

Source

2013-11-16 18:57:14 JumpLink

comment faire un div en plein écran, et empêcher la taille d'être changé par le contenu?

Répondre

Questions connexes