web-dev-qa-db-fra.com

Bordure autour de 100% de la hauteur et de la largeur du corps (HTML 4.01 Strict)

Ok, ça me rend fou en ce moment.

Je veux avoir une bordure autour de mon document. Cela devrait faire le tour de toute la fenêtre/fenêtre. Alors 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 tout à fait sur les bords de ma page, évidemment parce que les CSS prédéfinies body et html sont définies pour remplir l'écran.

Lorsque vous passez en mode standard en définissant une valeur DOCTYPE, body et html HTML 4.01 strict en taillereal (plus petite) du contenu, la bordure est tracée au centre de l'écran. Alors 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 - barres de défilement, défilement exact un pixel pour afficher les bordures inférieure/droite. Cependant, je veux que cette frontière soit visible immédiatement.

Existe-t-il une méthode sans fioritures (comme "hauteur: 99,9%;", "débordement: caché;" ou "passer en mode quirks") pour obtenir une bordure à 100%, sans barres de défilement inutiles? IE-only est bien, cross-browser serait mieux, bien sûr.

htmlcssinternet-explorer
21
Tomalak

Comme SpliFF l’a déjà mentionné, le problème vient du fait que la valeur par défaut (W3C) modèle de boîte est 'content-box', ce qui a pour résultat que les bordures se trouvent en dehors de width et height. Mais vous voulez que ceux-ci se situent dans les 100% de largeur et de hauteur spécifiés. Une solution de contournement consiste à sélectionner le modèle de boîte de bordure, mais vous ne pouvez pas le faire dans IE 6 et 7 sans revenir en mode quirks.

Une autre solution fonctionne également dans IE 7. Réglez simplement html et body sur 100% height et overflow sur hidden pour supprimer les barres de défilement de la fenêtre. Ensuite, vous devez insérer un div wrapper positionné de manière absolue qui récupère la bordure rouge et tout le contenu, en définissant les quatre propriétés propriétés de décalage de la boîte sur 0 (la bordure se verrouille ainsi sur les bords de la fenêtre) et overflow à auto ( mettre les barres de défilement à l'intérieur de l'emballage div).

Un seul inconvénient: IE 6 ne prend pas en charge la définition de leftet deright et des deux topetbottom. La seule solution de contournement consiste à utiliser expressions CSS (dans un commentaire conditionnel) pour définir explicitement la largeur et la hauteur de l'encapsuleur à la taille de la fenêtre, moins la largeur de la bordure.

Pour mieux voir 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 à utiliser overflow: hidden en simulant une bordure à l'aide de quatre div qui collent aux bords de la fenêtre d'affichage (vous ne pouvez pas simplement superposer toute la fenêtre d'affichage avec une div en taille réelle, car tous les éléments situés en dessous ne serait plus accessible). Ce n'est pas une solution intéressante, mais au moins les barres de défilement normales restent dans leur position d'origine. Je n’arrivais pas à laisser IE 6 simuler le positionnement fixe à l’aide d’expressions CSS (problèmes avec les div à droite et en bas), mais cela semblait horrible quand même car ces expressions sont très chères et rendent devint fastidieusement 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>
13
Marcel Korpel

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

Je pensais que puisque les tables conservaient beaucoup de comportements "bizarres", même en mode standard, elles pourraient constituer la solution. Transformer l'élément HTML en un tableau est cependant assez amusant.

Avant de noter ceci pour ne pas travailler dans IE6, considérez qu'il s'agit d'un problème très simple à 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...
8
SpliFF

Jusqu'à ce que CSS3 nous donne des limites internes et un changement de modèle de boîte, vous avez besoin de deux divs. Le premier à donner la hauteur à 100% et le second à 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 de vous lancer dans "IE uniquement". IE n'a pas la part de marché qu'il a déjà eue. Entre 10 et 30% de vos utilisateurs peuvent être sur d'autres navigateurs.

3
SpliFF

C'est aussi un peu moche, mais donner le corps

position:relative;
top:-1px;
left:-1px;

a travaillé pour moi.

1
acme

Voici une solution simple utilisant uniquement les éléments html et body (nul besoin de divs imbriquées). Il tire parti du comportement spécial de l'élément HTML (il ne peut pas avoir de bordure extérieure, il doit donc être réduit 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>
1
SpliFF

Essayez de définir des bordures pour l'élément html. L'élément body est seulement aussi haut que nécessaire, mais pour autant que je m'en souvienne, l'élément html occupe tout l'espace (c'est également l'endroit où vous devez définir votre arrière-plan).

Je ne sais pas à quoi ressemblent les frontières, je ne règle généralement que les arrière-plans.

0
Xr.

la bordure est de taille 100%. Essayez padding: -1px ou margin: -1px.

0
Sergei Kovalenko