Comment faire un <div> toujours en plein écran?
Peu importe la façon dont son contenu est comme.
Est-il possible de faire cela?
- Il y a beaucoup de réponses ici, mais je ne vois aucune mention de flexbox, alors j'ai pensé que je devais partager ce 2 cents: Avoir div parent à 100%, c'est une chose, mais si le moment est venu de mettre, organiser, et au centre un peu de contenu dans la div, vous aurez envie de chercher à flexbox. css-tricks.com/snippets/css/a-guide-to-flexbox
Vous devez vous connecter pour publier un commentaire.
Cela fonctionne toujours pour moi:
C'est probablement la solution la plus simple à ce problème. Seulement besoin de définir quatre attributs CSS (bien que l'un d'entre eux est seulement pour faire de l'IE heureux).
C'est ma solution pour créer un plein écran div, à l'aide de pur css.
Il affiche plein écran d'une div qui est persistant sur le défilement.
Et si le contenu de la page s'adapte à l'écran, la page ne sera pas afficher une barre de défilement.
Testé dans IE9+, Firefox 13+, Chrome 21+
HTML:
C'est le plus stable (et facile) de le faire, et il fonctionne dans tous les navigateurs modernes:
CSS:
HTML:
Testé pour fonctionner dans les navigateurs Firefox, Chrome, Opera, Vivaldi, IE7+ (basé sur l'émulation dans IE11).
position: fixed; top: 0; left: 0;
et maintenant, la partie qui est différent:width: 100%; height: 100%;
. Cela fonctionne dans les navigateurs plus anciens parfaitement ainsi.box-sizing: border-box;
, sinon, vous aurez une grande boîte qui sera la cause de défilement. Voir ceci.La meilleure façon de le faire avec les navigateurs modernes serait de faire usage de Fenêtre d'affichage de pourcentage Longueurs, retomber pourcentage régulier longueurs pour les navigateurs qui ne supportent pas ces unités.
Fenêtre d'affichage de pourcentage longueurs sont basés sur la longueur de la fenêtre d'affichage lui-même. Les deux unités que nous allons utiliser sont
vh
(fenêtre d'affichage de la hauteur) etvw
(largeur de la fenêtre d'affichage).100vh
est égal à 100% de la hauteur de la fenêtre d'affichage, et100vw
est égal à 100% de la largeur de la fenêtre d'affichage.En supposant que le code HTML suivant:
Vous pouvez utiliser les éléments suivants:
Ici est un JSFiddle démo qui montre la
div
élément de remplissage à la fois la hauteur et la largeur de la suite de cadre. Si vous redimensionnez le résultat en image, lediv
élément redimensionne en conséquence.Je n'ai pas IE Josh, pourriez-vous s'il vous plaît tester cela pour moi. Merci.
position: fixed
en revanche si la page peut faire défiler, mais vous l'esprit que cela ne fonctionne pas dans certains navigateurs mobiles caniuse.com/#feat=css-fixedCe que j'ai trouvé la meilleure manière élégante est comme ce qui suit, la plupart des astuce ici est de faire de la
div
'sposition: fixed
.CSS:
HTML:
Changer le
body
élément dans unflex container
et ladiv
dans unflex item
:CSS:
HTML:
Voici le plus court de solution, basée sur
vh
. Veuillez noter quevh
n'est pas pris en charge dans certains navigateurs plus anciens.CSS:
HTML:
C'est l'astuce que j'utilise. Bon pour répondre dessins. Fonctionne parfaitement lorsque l'utilisateur tente de salir avec le navigateur de redimensionnement.
Malheureusement, la
height
propriété en CSS n'est pas aussi fiable qu'il devrait être. Par conséquent, Javascript doit être utilisée pour définir la hauteur du style de l'élément en question, à la hauteur des utilisateurs de la fenêtre d'affichage. Et oui, cela peut être fait sans un positionnement absolu...$(window).height();
serait la meilleure idée.