Bordure autour de 100% hauteur et largeur du corps (HTML 4.01 Strict)
Ok, ça me rend fou en ce moment.
Je veux avoir une bordure autour de mon document. Il devrait bien faire le tour de toute la fenêtre / fenêtre. Donc je définis:
body {
border: 1px solid red;
}
Lorsque mon document est en mode quirks, cela fonctionne bien. Au moins dans IE, qui est ma cible principale ici. Une bordure rouge apparaît sur les bords mêmes de ma page, évidemment parce que par CSS prédéfini body et html sont configurés pour remplir l'écran.
Lorsque vous passez en mode standard en définissant un HTML 4.01 DOCTYPE strict, body et html s'effondrent à la taille réelle (plus petite) du contenu, la bordure est dessinée au milieu de l'écran. Donc je définis:
body, html {
padding: 0px;
margin: 0px;
border: 0px none;
width: 100%;
height: 100%;
}
body {
border: 1px solid red;
}
Et je reçois des barres de défilement, faisant défiler exactement un pixel pour afficher les bordures inférieures / droites. Cependant, je veux que cette frontière soit visible tout de suite.
Est-il un no-bullshit "(comme " hauteur: 99.9%;", "overflow: hidden;" ou de "revenir en mode quirks") méthode pour obtenir une bordure à 100%, sans inutiles les barres de défilement? IE-seulement est bien, cross-browser serait mieux, bien sûr.
7 réponses
Comme SpliFF l'a déjà mentionné, le problème est que le modèle de boîte par défaut (W3C) est 'content-box', ce qui entraîne des bordures en dehors des width et height. Mais vous voulez que ceux-ci soient dans la largeur et la hauteur de 100% que vous avez spécifiées. Une solution de contournement consiste à sélectionner le modèle de boîte border-box, mais vous ne pouvez pas le faire dans IE 6 et 7 sans revenir au mode quirks.
Une autre solution fonctionne aussi dans IE 7. Il suffit de définir html et body à 100% de hauteur et overflow à hidden pour se débarrasser des barres de défilement de la fenêtre. Ensuite, vous devez insérer un div wrapper absolument positionné qui obtient la bordure rouge et tout le contenu, en définissant les quatre propriétés Box offset à 0 (de sorte que la bordure colle aux bords de la fenêtre) et overflow à auto (pour mettre les barres de défilement à l'intérieur du div wrapper).
Il n'y a qu'un seul inconvénient: IE 6 ne prend pas en charge le réglage à la fois left et right et les deux top et bottom. La seule solution pour cela est d'utiliser expressions CSS (dans un commentaire conditionnel) pour définir explicitement la largeur et la hauteur du wrapper aux tailles de la fenêtre, moins la largeur de la bordure.
Pour faciliter la visualisation de l'effet, dans l'exemple suivant, j'ai agrandi la largeur de la bordure à 5 pixels:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
P.S.: je viens de voir que tu n'aimes pas overflow: hidden, hmmm...
Mise à jour: j'ai réussi à me déplacer en utilisant overflow: hidden en simulant une bordure en utilisant quatre divs qui collent à la bords de la fenêtre (vous ne pouvez pas simplement superposer toute la fenêtre avec une div pleine taille, car tous les éléments ci-dessous ne seraient plus accessibles). Ce n'est pas une bonne solution, mais au moins les barres de défilement normales restent dans leur position d'origine. Je n'ai pas réussi à laisser IE 6 simuler le positionnement fixe en utilisant des expressions CSS (j'ai des problèmes avec les divs de droite et de bas), mais cela avait l'air horriblement quand même car ces expressions sont très chères {[19] } et le rendu a été fastidieux lent.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#border-t, #border-b, #border-l, #border-r {
position: fixed;
background: red;
z-index: 9999;
}
#border-t {
left: 0;
right: 0;
top: 0;
height: 5px;
}
#border-b {
left: 0;
right: 0;
bottom: 0;
height: 5px;
}
#border-l {
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
#border-r {
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
</style>
</head>
<body>
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
<div id="border-t"></div><div id="border-b"></div>
<div id="border-l"></div><div id="border-r"></div>
</body>
</html>
Vous allez adorer celui-ci.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
#wrapper {
display: table-cell;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
Http://www.test.dev.arc.net.au/100-percent-border.html
J'ai pensé que puisque les tables gardent beaucoup de comportement "original" même en mode standard, elles pourraient être la solution. Transformer l'élément HTML en une table est assez drôle cependant.
Avant de marquer cela pour ne pas fonctionner dans IE6, considérez que c'est un problème très trivial à résoudre. Le fait est que l'utilisation de l'algorithme de dessin de table est la solution, et une solution CSS pure est également possible:
<table class="outer"><tr><td class="inner"> ...page content...
Jusqu'à ce que CSS3 nous donne des frontières intérieures et le changement de modèle de boîte, vous avez besoin de deux divs. Le premier pour donner la hauteur de 100% et le second pour fournir la bordure. Sinon, la bordure va à l'extérieur de la hauteur de 100% (c'est-à-dire 1px+100%+1px)
BTW. Vous devriez collecter des statistiques avant d'aller "IE seulement". IE n'a pas la part de marché, il l'a fait une fois. N'importe où entre 10 - 30% de vos utilisateurs peuvent être sur d'autres navigateurs.
Voici une solution simple utilisant uniquement les éléments html et body (pas besoin de divs imbriqués). Il profite du comportement spécial de L'élément HTML (il ne peut pas avoir de bordure extérieure, il doit donc rétrécir pour l'afficher).
<html>
<head>
<style>
html {padding:0; margin:0; border:5px solid red;}
body {height:100%; padding:0; margin:0; border:0;}
</style>
</head>
<body>
</body>
</html>
C'est aussi un peu moche, mais donnant le corps
position:relative;
top:-1px;
left:-1px;
Travaillé pour moi.
Essayez de définir des bordures pour l'élément html. L'élément de corps est seulement aussi haut qu'il doit, mais, autant que je me souvienne, l'élément html prend tout l'espace (c'est là que vous devez définir votre arrière-plan, trop).
Je ne suis pas sûr de l'apparence des frontières, Je ne mets généralement que des arrière-plans.
La Bordure est de taille hors 100%. Essayez padding: -1px ou margin: -1px.