Il y a actuellement 74 visiteurs
Samedi 31 Juillet 2021
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

height:auto ne s'applique plus à l'ajout d'un DOCTYPE

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

height:auto ne s'applique plus à l'ajout d'un DOCTYPE

Message le 02 Juin 2013 00:57

Bonjour à tous,

J'ai un problème assez simple : un site avec une DIV centrale qui doit s'ajuster à la hauteur (jusqu'au bas) d'une autre DIV et ça fonctionne parfaitement, sauf si je mets un DOCTYPE, et je veux dire par là n'importe quel DOCTYPE!

Voyez par vous-même. Voici mon site que j'ai simplifié au maximum. La DIV textecentre devrait, comme elle le fait quand il n'y a pas de DOCTYPE, aller jusqu'au bas de la DIV overall et s'arrêter là, et une scrollbar s'ajouter à droite. Mais lorsqu'on met un DOCTYPE, elle s'allonge tant qu'il y a du texte! Quelqu'un peut m'aider?

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->

<HTML>
<HEAD>
<TITLE>Mon site</TITLE>


<script type="text/javascript">

function chk(){
my_div=document.getElementById("textecentre")
top_space=document.getElementById("textecentre").offsetTop
bottom_space=4
my_div.style.height=document.documentElement.clientHeight-top_space-bottom_space
}

onresize=chk

</script>


<style type="text/css">
html           {height:100%;}
body           {text-align:center; height:100%;}
#overall       {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}
#textecentre   {position:absolute; top:210px; right:260px; width:450px; height:auto; background-color:#99CCFF; overflow:auto;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>


</HEAD>

<BODY onload="chk();">


<div id="overall">

<div id="textecentre">

<div id="IDpres"><pre>
présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation
</pre></div>

</div>

</div>

<div id="footer">
</div>
</BODY>
</HTML>


Mise à jour: J'ai trouvé le problème mais je ne sais pas comment le régler.

C'est que quand on met le doctype, ça empêche l'exécution de ma fonction ''chk''.

Cette fonction est absolument nécessaire pour que mon site s'affiche comme je veux, en tout cas j'ai fait énormément de recherches pour obtenir cette function, parce que rien n'y faisait!

Mais comment se fait-il que si on met un DOCTYPE quel qu'il soit, ça annule la fonction?


Mise à jour : Il y a pas mal de problèmes postés sur des forums concernant le document.body.clientHeight qui ne fonctionne pas sous IE. Mais contrairement à moi, tout le monde semble avoir merveilleusement réglé le problème en remplaçant ça par document.documentElement.clientHeight... je poursuis donc mes recherches et je le remplace dans mon code, pour que si quelqu'un trouve la solution ça soit susceptible de marcher. Du coup, mon message devrait probablement être déplacé dans le forum de javascript, je suis désolé je ne pouvais pas le savoir avant ces nombreuses heures de recherche.
Dernière édition par EinsteinZero le 04 Juin 2013 18:01, édité 2 fois.
Raison: remplacement de la couleur rouge par du bleu
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 


Sujet résolu

Message le 03 Juin 2013 22:24

Bah j'ai réglé mon problème tout seul, j'ai fait énormément de recherche et j'ai modifié ma fonction, je crois que c'est ce qui la fait marcher

Voici mon code :

Code: Tout sélectionner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mon site</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript" language="Javascript">

function chk(){
my_div=document.getElementById("textecentre")
my_div.style.height=document.documentElement.clientHeight-236 + "px"
}

onresize=chk

</script>


<style type="text/css">
html           {height:100%;}
body           {text-align:center; height:100%;}
#overall       {margin:auto; width:990px; position:relative; height:100%; background-color:#6699CC;}
#textecentre   {position:absolute; top:210px; right:260px; width:450px; height:auto; margin:1% auto 0; background-color:#99CCFF; overflow:auto;}
#footer        {width:990px; height:68px; margin:auto; background-color:#006699;}
</style>


</head>

<body onload="chk();">


<div id="overall">

<div id="textecentre">

<div id="IDpres"><pre>
présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation

présentation
</pre></div>

</div>

</div>

<div id="footer">
</div>
</body>
</html>
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 

Re: height:auto ne s'applique plus à l'ajout d'un DOCTYPE

Message le 04 Juin 2013 18:03

Bonsoir
Petit message de la modération :wink:

comme la couleur rouge est plutôt réservée pour des intervention "de police" de la modération, je me suis permis de remplacer ton "pavé en rouge" par un "pavé en bleu".....

simplement pour éviter toute confusion possible. :wink:

EZ
La sagesse est une montagne dont la base est confondue avec le sommet
...Celui qui a été lumière jamais ne disparait.. il reste lumière, sentinelle dans l'éternité, son aura bienveillante nous montre le chemin.
Avatar de l'utilisateur
EinsteinZero
Moderateur
Moderateur
 
Messages: 17280
Inscription: 27 Déc 2009 16:22
Localisation: Normandie
 

Re: height:auto ne s'applique plus à l'ajout d'un DOCTYPE

Message le 12 Juin 2013 00:23

Juste pour répondre à ta question originale:
tu peux lire ça (en anglais) :
http://www.jr.pl/www.quirksmode.org/css ... eight.html

Je vais traduire l'idée générale ici:

En gros, il y a deux façon d'interpréter le HTML pour un navigateur: Strict mode et Quircks mode.
La raison est historique. A une époque, les navigateurs marchaient d'un certaine façon, et les gens ne mettaient pas de DOCTYPE. Et puis les spécifications sont arrivées, il y a eu des règles, et les navigateurs les ont suivi. Les nouveaux sites utilisaient aussi les DOCTYPE pour dire aux navigateurs quelles règles ils suivaient.

Du coup, pour différencier les vieux sites (quirks mode) et les nouveaux site (strict mode), le navigateur regarde s'il y a un DOCTYPE.

La regle 'height: 100%' sur l'élément body s'applique différement en quirks et en strict, mais il y a un truc à faire pour que ça marche: il suffit de mettre une règle 'height: 100%' également sur l'élément html:

Code: Tout sélectionner
html, body {
    height: 100%;
}


EDIT: donc au final, pas besoin de javascript. Meme si le javascript te donne le bon comportement, c'est dommage d'avoir a mettre du JS pour une hitoire de présentation uniquement.
alicelieutier
Visiteur
Visiteur
 
Messages: 5
Inscription: 24 Mai 2013 15:02
 

Re: height:auto ne s'applique plus à l'ajout d'un DOCTYPE

Message le 27 Juin 2013 16:58

Merci, c'est résolu ;-)
Avatar de l'utilisateur
Znojmo
Visiteur Confirmé
Visiteur Confirmé
 
Messages: 14
Inscription: 03 Oct 2012 00:39
 



Sujets similaires

Message Xiaomi Mi note 10 luminosité auto ne fonctionne pas
Bonjour, j'ai changer de mobile pour prendre un Xiaomi Mi note 10 d'occasion que j'ai réparé moi même (Petit impact à l'écran) .Je me suis vite aperçu que le mode "Luminosité auto" ne fonctionne pas du tout que ça soit dans la nuit ou en plein jour rien ne ce passe , est-ce un problème l ...
Réponses: 3

Message ajout de barrette mémoire et carte graphique sur pc assemblé
Bonjour,Pourriez-vous m'indiquer un modèle de barrette mémoire afin d'augmenter la mémoire et de carte graphique sur un pc assemblé comportant :carte mère MSI H 61M P20 G3 4 go de ram SSD : 240 goCarte graphique AMD RADEON 5570Merci d'avance pour vos réponsesCordialement
Réponses: 15

Message PC bloqué sur BIOS setup Auto-Entry
Bonjour à toutes et tous,Après m?être battu de longues heures... je m?avoue vaincu. Je n?y arriverais pas seul..Je suis donc à la recherche d?âmes charitables dotées de plus de competences que moi.Voici la situation complète :Depuis plusieurs jours mon pc semblait avoir des difficultés à passer une ...
Réponses: 16

Message [Réglé] ajout d'un DD dans mon PC
bonjour,Je possède un PC monté "maison" et au fur et à mesure du temps j'ai rajouté 2 DD en voici le détail :C/ : mon ancien et premier *DD" de boot D/ : mon second "DD" de boot (sur lequel démarre le PC)H/ : un DD sur le quel j'ai fait la récupération d'un tout premier PC ...
Réponses: 9

Message alim auto pour pc portable
Bonjour, j'aimerai savoir quelles solutions existent pour recharger un pc portable (en l'occurrence un Dell E5430) dans une voiture. J'ai trouvé ça : https://www.amazon.fr/CHARGEUR-VOITURE- ... B008Y5AZL2 ou ça : https://www.pochargeur.com/chargeur-de- ... zIEALw_wcBmais existe t'il d'autres solutio ...
Réponses: 2

Message Ajout de ram
Bonjour à tous(tes) . Je désirerai ajouter de la mémoire sur le pc du fiston , mais je n'arrive pas à trouver exactement les mêmes surtout pour le voltage 1.65V .Actuellement il a celle-ci 8go 2x4KHX1600C9D3K2/8GKIT OF 2 1.65Vc'est de la Kingston HYPERX GenesisJe voudrai biens ajouter une photo m ...
Réponses: 5

Message BSoD suite à un ajout de RAM
Bonjour,Je rencontre actuellement un soucis de BSoD suite à un ajout de RAM.J'avais 16Go (2*8) de RAM et j'ai rajouté 16Go (2*8) supplémentaire, de la marque et modèle que celle que j'avais.L'installation s'est très bien déroulée, le problème est apparu 5 minutes après le démarrage de mon pc.A chaqu ...
Réponses: 6


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 3 invités


.: Nous contacter :: Flux RSS :: Données personnelles :.