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

Ok, ça me rend fou maintenant.

Je veux avoir une bordure autour de mon document. Il faut bien aller autour de la totalité de la fenêtre/fenêtre d'affichage. J'ai donc définir:

body {
  border: 1px solid red;
}

Lors de mon document est en mode quirks, cela fonctionne bien. Au moins dans IE, qui est mon principal objectif ici. Une bordure rouge montre jusqu'à la limite de ma page, bien sûr, parce que par prédéfinis CSS body et html sont mis à remplir l'écran.

Lorsque vous allez à la mode normes en définissant un DOCTYPE HTML 4.01 strict, body et html effondrement de la réel (petite) taille du contenu, la frontière est tracée de droite passant par le milieu de l'écran. J'ai donc définir:

body, html {
  padding: 0px;
  margin: 0px;
  border: 0px none;
  width: 100%;
  height: 100%;
}

body {
  border: 1px solid red;
}

Et je reçois — les barres de défilement, défilement exactement un pixel pour afficher le bas/la droite frontières. Cependant, je veux que la frontière visible immédiatement.

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 barres de défilement? IE-seulement est fine, cross-browser serait mieux, bien sûr.

  • IE-seulement pour l'application intranet? Le seul endroit où vous pouvez obtenir 100% de non-utilisateurs d'internet explorer? Fou! 🙂
  • Les environnements d'entreprise et Firefox sont mutuellement exclusifs. Au moins 99% du temps. Et jusqu'à ce que Mozilla enfin, il obtient que le manuel de l'authentification NTLM (ou jouer avec about:config par client), n'a vraiment pas le couper, c'est va rester de cette façon.
  • À distance de configs. wetdog.sourceforge.net
  • Avec ce Tomalak dit, Firefox a toujours eu assez de problèmes d'impression que la plupart des entreprises de le fuir ainsi. C'est une chose de faire un développeur de faire quelques contorsions; il est tout à fait autre à faire qu'il est impossible pour l'utilisateur final de travailler comme ils veulent.
InformationsquelleAutor Tomalak | 2009-05-20
  1. 13

    Comme SpliFF, déjà mentionné, le problème est que la valeur par défaut (W3C) modèle de boîte est "content-box", qui se traduit dans les frontières étant à l'extérieur de la width et height. Mais vous voulez que ces être dans les 100% de la largeur et de la hauteur que vous avez spécifié. Une solution de contournement consiste à sélectionner le border-box modèle de boîte, mais vous ne pouvez pas le faire dans IE 6 et 7 sans revenir en mode quirks.

    Une autre solution fonctionne dans IE 7, trop. Juste mettre html et body à 100% de la hauteur et de overflow à hidden pour se débarrasser de la fenêtre, des barres de défilement. Ensuite, vous devez insérer un positionnement absolu div wrapper qui obtient la bordure rouge et tout le contenu, le réglage de tous les quatre zone de décalage propriétés à 0 (donc la frontière colle aux bords de la fenêtre d'affichage et overflow à auto (pour mettre les barres de défilement à l'intérieur de la div wrapper).

    Il n'y a qu'un seul inconvénient: IE 6 ne prend pas en charge la définition de deux left et right et les deux top et bottom. La seule solution pour cela est d'utiliser Expressions CSS (dans un commentaire conditionnel) de définir explicitement la largeur et la hauteur de l'emballage à la fenêtre d'affichage de la taille, moins la largeur de la bordure.

    Pour le rendre plus facile pour voir l'effet, dans l'exemple suivant, j'ai agrandi la largeur de la bordure de 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 vous n'aimez pas overflow: hidden, hmmm...

    Mise à jour: j'ai réussi à obtenir autour de l'utilisation overflow: hidden en simulant une frontière à l'aide de quatre divs qui sont collés sur les bords de la fenêtre d'affichage (vous ne pouvez pas simplement la superposition de l'ensemble de la fenêtre avec un plein taille des div, comme tous les éléments ci-dessous, il ne serait pas plus accessible). Ce n'est pas une solution sympa, mais au moins la normale barres de défilement restent dans leur position d'origine. Je ne parvenais pas à le laisser IE 6 simuler la correction du positionnement à l'aide d'expressions CSS (ai eu des problèmes avec la droite et en bas divs), mais il semblait horriblement de toute façon que ces expressions sont très cher et le rendu obtenu péniblement 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>
    • +1, au moins c'est une explication décente. Ouais, le overflow: hidden est très orthodoxe, mais je pense qu'il y a pas moyen de contourner cela. Comme dirait ma demande d'origine est impossible à remplir, mais c'est une réponse, trop.
    • PS: Beau travail autour dans votre mise à jour! Je donnerais un deuxième +1 si je le pouvais. 🙂
    • Je l'ai fait pour vous. 😉
    InformationsquelleAutor Marcel Korpel
  2. 8

    Vous allez aimer 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 trouvé depuis que les tables de garder beaucoup de "bizarre" comportement, même selon les standards mode, ils pourraient être la solution. En tournant l'élément HTML dans une table est assez drôle même si.

    Avant le marquage ce pour ne pas travailler dans IE6 considérer que c'est un très banal problème à résoudre. Le point est que l'utilisation de la table de dessin de l'algorithme est la solution, et un pur CSS solution est également possible:

    <table class="outer"><tr><td class="inner"> ...page content...
    • La seule solution sur la page qui fonctionne réellement et il est marqué en bas?? WTF?
    • Hmm.. pense, car il ne fonctionne pas sous IE6? mais alors qu'est ce que IE7-js est pour.
    • cela fonctionne pour une mesure. si vous avez plusieurs divs positionnés relativement, pour quelque raison que ce soit la première div prendra de la grande majorité de l'espace et de tous les autres div ne fera que prendre une infime partie de l'écran, au lieu de chaque page, sur une page entière :/ pourquoi est-ce?!?!?!
    InformationsquelleAutor SpliFF
  3. 3

    Jusqu'CSS3 nous donne à l'intérieur des frontières et de la boîte-modèle de commutation vous avez besoin de deux divs. Le premier à donner 100% de la hauteur et la seconde pour fournir de la frontière. Sinon, la frontière passe à l'extérieur de la 100% de la hauteur (c'est à dire, 1px+100%+1px)

    BTW. Vous devez collecter quelques statistiques avant d'aller "c'est à dire uniquement". IE n'a pas les parts de marché qu'elle avait autrefois. N'importe où entre 10% à 30% de vos utilisateurs peut être sur d'autres navigateurs.

    • C'est une application Intranet. Il est assez sûr de dire que c'est IE seul. 😉
    InformationsquelleAutor SpliFF
  4. 1

    Voici une solution simple en utilisant seulement l'html et des éléments du corps (pas besoin de divs imbriqués). Il faut profiter de la spéciale de comportement de l'élément HTML (il ne peut pas avoir une frontière extérieure de sorte qu'il doit diminuer afin de 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>
    • Nice. Je ne savais pas à propos de la "spéciale" propriétés de l'élément HTML à cet égard. Bon à savoir.
    • Il ne semble pas fonctionner en mode standard, cependant. Le html hauteur s'effondre à nouveau, et la valeur de 100% des résultats dans une barre de défilement verticale.
    • Vous devez utiliser Internet Exploiteur. Il fonctionne avec 4.01 Strict sur FF alors, vous êtes probablement voir un bug lié au navigateur.
    • hmm. vous avez raison. Je ne dois pas avoir rechargé la page.
    InformationsquelleAutor SpliFF
  5. 1

    Elle aussi un peu moche, mais en donnant le corps

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

    a fonctionné pour moi.

    • Qui vaut la peine d'essayer aussi bien. Et c'est juste un peu moche, pas grave.
    InformationsquelleAutor acme
  6. 0

    Essayez de définir les frontières de 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 savoir comment les frontières de regarder, j'ai l'habitude de définir uniquement les milieux.

    • Pas de travail, même problème. L'élément HTML est aussi seulement comme haut/large, doit être lorsque le document est en mode standard.
    InformationsquelleAutor Xr.
  7. 0

    frontière est de 100% de la taille. Essayez padding: -1px ou margin: -1px.

    • marge négative tiré la frontière du document, le rembourrage doit être positive dans la spécification CSS.
    InformationsquelleAutor Sergei Kovalenko