Peu importe à quoi ressemble son contenu.
Est-il possible de faire cela?
Peu importe à quoi ressemble son contenu.
Est-il possible de faire cela?
Réponses:
Ça fonctionne toujours pour moi:
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
#container {
height: 100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">some content</div>
</body>
C'est probablement la solution la plus simple à ce problème. Il suffit de définir quatre attributs CSS (bien que l'un d'eux ne soit que pour rendre IE heureux).
C'est ma solution pour créer un div plein écran, en utilisant du css pur. Il affiche un div plein écran qui persiste lors du défilement. Et si le contenu de la page correspond à l'écran, la page n'affichera pas de barre de défilement.
Testé dans IE9 +, Firefox 13+, Chrome 21+
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title> Fullscreen Div </title>
<style>
.overlay {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(51,51,51,0.7);
z-index: 10;
}
</style>
</head>
<body>
<div class='overlay'>Selectable text</div>
<p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>
C'est le moyen le plus stable (et le plus simple) de le faire, et cela fonctionne dans tous les navigateurs modernes:
.fullscreen {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background: lime; /* Just to visualize the extent */
}
<div class="fullscreen">
Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>
Testé pour fonctionner dans Firefox, Chrome, Opera, Vivaldi, IE7 + (basé sur l'émulation dans IE11).
position: fixed; top: 0; left: 0;
et maintenant la partie qui est différente: width: 100%; height: 100%;
. Cela fonctionne également parfaitement dans les navigateurs plus anciens.
box-sizing: border-box;
, sinon vous obtiendrez une boîte plus grande qui provoquera le défilement. Regarde ça .
La meilleure façon de le faire avec les navigateurs modernes serait d'utiliser les longueurs en pourcentage de la fenêtre , en revenant aux longueurs en pourcentage normales pour les navigateurs qui ne prennent pas en charge ces unités .
Les longueurs en pourcentage de la fenêtre sont basées sur la longueur de la fenêtre elle-même. Les deux unités que nous utiliserons ici sont vh
(hauteur de la fenêtre) et vw
(largeur de la fenêtre). 100vh
est égal à 100% de la hauteur de la fenêtre et 100vw
est égal à 100% de la largeur de la fenêtre.
En supposant le HTML suivant:
<body>
<div></div>
</body>
Vous pouvez utiliser les éléments suivants:
html, body, div {
/* Height and width fallback for older browsers. */
height: 100%;
width: 100%;
/* Set the height to match that of the viewport. */
height: 100vh;
/* Set the width to match that of the viewport. */
width: 100vw;
/* Remove any browser-default margins. */
margin: 0;
}
Voici une démonstration de JSFiddle qui montre l' div
élément remplissant à la fois la hauteur et la largeur du cadre de résultat. Si vous redimensionnez le cadre de résultat, l' div
élément est redimensionné en conséquence.
Je n'ai pas IE Josh, pourriez-vous s'il vous plaît tester ceci pour moi. Merci.
<html>
<head>
<title>Hellomoto</title>
<style text="text/javascript">
.hellomoto
{
background-color:#ccc;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
overflow:auto;
}
body
{
background-color:#ff00ff;
padding:0px;
margin:0px;
width:100%;
height:100%;
overflow:hidden;
}
.text
{
background-color:#cc00cc;
height:800px;
width:500px;
}
</style>
</head>
<body>
<div class="hellomoto">
<div class="text">hellomoto</div>
</div>
</body>
</html>
Ce que j'ai trouvé la meilleure manière élégante est comme suit, le plus truc ici est de faire le div
's position: fixed
.
.mask {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: contain;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<h1>Whatever it takes</h1>
<div class="mask"></div>
</body>
</html>
Changez l' body
élément en a flex container
et le div
en a flex item
:
body {
display: flex;
height: 100vh;
margin: 0;
}
div {
flex: 1;
background: tan;
}
<div></div>
Voici la solution la plus courte, basée sur vh
. Veuillez noter que ce vh
n'est pas pris en charge dans certains navigateurs plus anciens .
CSS:
div {
width: 100%;
height: 100vh;
}
HTML:
<div>This div is fullscreen :)</div>
C'est l'astuce que j'utilise. Bon pour les conceptions réactives. Fonctionne parfaitement lorsque l'utilisateur essaie de jouer avec le redimensionnement du navigateur.
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container {
position: absolute;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">some content</div>
</body>
Malheureusement, la height
propriété en CSS n'est pas aussi fiable qu'elle devrait l'être. Par conséquent, Javascript devra être utilisé pour définir le style de hauteur de l'élément en question à la hauteur de la fenêtre des utilisateurs. Et oui, cela peut se faire sans positionnement absolu ...
<!DOCTYPE html>
<html>
<head>
<title>Test by Josh</title>
<style type="text/css">
* { padding:0; margin:0; }
#test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
window.onload = function() {
var height = getViewportHeight();
alert("This is what it looks like before the Javascript. Click OK to set the height.");
if(height > 0)
document.getElementById("test").style.height = height + "px";
}
function getViewportHeight() {
var h = 0;
if(self.innerHeight)
h = window.innerHeight;
else if(document.documentElement && document.documentElement.clientHeight)
h = document.documentElement.clientHeight;
else if(document.body)
h = document.body.clientHeight;
return h;
}
</script>
</head>
<body>
<div id="test">
<h1>Test</h1>
</div>
</body>
</html>
$(window).height();
serait la meilleure idée.