IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

height auto / 100% pour conteneur de la même hauteur


Sujet :

Dimensionnement en CSS

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : Octobre 2014
    Messages : 12
    Points : 9
    Points
    9
    Par défaut height auto / 100% pour conteneur de la même hauteur
    Bonjour,

    J'ai un petit problème avec la hauteur d'une div.
    Pour faire simple, j'ai HTML et Body a 100%.
    Une div corpspage que je souhaite garder en height:auto puisque je l'ai sur plusieurs pages avec des contenus de différentes longueurs.
    Dans ce corpspage
    - une div menuleft en flaot left et border right 2px et height : 100%
    - une div container height: auto

    Le problème est le suivant, quand la div container dépasse la div menuleft en hauteur, la div menuleft ne prends pas 100% de la hauteur mais seulement la hauteur de son contenu.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/>
    	</head>
    		<body>
    			<div class="corpspage">
    				<div class="menuleft">
    					<h2 style="margin:20px;font-size:15px;">L'AGENCE</h2>
    					<h2 style="margin:20px;font-size:15px;">L'AGENCE</h2>
    					<h2 style="margin:20px;font-size:15px;">L'AGENCE</h2>
    					<h2 style="margin:20px;font-size:15px;">L'AGENCE</h2>
    					<h2 style="margin:20px;font-size:15px;">L'AGENCE</h2>
    				</div>
     
    				<div class="container">
    					<p>Haec igitur prima lex amicitiae sanciatur, ut ab amicis honesta petamus, amicorum causa honesta faciamus, ne exspectemus quidem, dum rogemur; studium semper adsit, cunctatio absit; consilium vero dare audeamus libere. Plurimum in amicitia amicorum bene suadentium valeat auctoritas, eaque et adhibeatur ad monendum non modo aperte sed etiam acriter, si res postulabit, et adhibitae pareatur.
     
    Quam ob rem cave Catoni anteponas ne istum quidem ipsum, quem Apollo, ut ais, sapientissimum iudicavit; huius enim facta, illius dicta laudantur. De me autem, ut iam cum utroque vestrum loquar, sic habetote.
     
    Eius populus ab incunabulis primis ad usque pueritiae tempus extremum, quod annis circumcluditur fere trecentis, circummurana pertulit bella, deinde aetatem ingressus adultam post multiplices bellorum aerumnas Alpes transcendit et fretum, in iuvenem erectus et virum ex omni plaga quam orbis ambit inmensus, reportavit laureas et triumphos, iamque vergens in senium et nomine solo aliquotiens vincens ad tranquilliora vitae discessit.
     
    Post quorum necem nihilo lenius ferociens Gallus ut leo cadaveribus pastus multa huius modi scrutabatur. quae singula narrare non refert, me professione modum, quod evitandum est, excedamus.
     
    Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.
     
    Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.
     
    Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur.
     
    Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.
     
    Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.
     
    Quam ob rem vita quidem talis fuit vel fortuna vel gloria, ut nihil posset accedere, moriendi autem sensum celeritas abstulit; quo de genere mortis difficile dictu est; quid homines suspicentur, videtis; hoc vere tamen licet dicere, P. Scipioni ex multis diebus, quos in vita celeberrimos laetissimosque viderit, illum diem clarissimum fuisse, cum senatu dimisso domum reductus ad vesperum est a patribus conscriptis, populo Romano, sociis et Latinis, pridie quam excessit e vita, ut ex tam alto dignitatis gradu ad superos videatur deos potius quam ad inferos pervenisse.
     
    Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.
     
    Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.
     
    Erat autem diritatis eius hoc quoque indicium nec obscurum nec latens, quod ludicris cruentis delectabatur et in circo sex vel septem aliquotiens vetitis certaminibus pugilum vicissim se concidentium perfusorumque sanguine specie ut lucratus ingentia laetabatur.
     
    In his tractibus navigerum nusquam visitur flumen sed in locis plurimis aquae suapte natura calentes emergunt ad usus aptae multiplicium medelarum. verum has quoque regiones pari sorte Pompeius Iudaeis domitis et Hierosolymis captis in provinciae speciem delata iuris dictione formavit.
    				<p>
    				</div>
    			</div>
     
    				<footer>
    				</footer>
    	</body>
     
     
    </html>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    html{
    width:100%;
    height:100%;
    background-color: blue;
    margin: auto;
    padding: auto;
    }
     
    body{
    width:100%;
    height:100%;
    background-color: red;
    margin: auto;
    padding: auto;
    }
     
    div.clear{
    	clear:both;
    }
     
    .corpspage {
    width:100%;
    height:auto;
    background-color: grey;
    margin: auto;
    padding: auto;
    }
     
    .menuleft {
    	position: relative;
    	float: left;
    	width: 15%;
    	height: 100%;
    	font-size: 15px;
    	text-decoration:none;
    	color: black;
    	border-right: 2px black solid;
    	max-width:288px;	
    	min-width: 204px;
    }
     
    .container {
    	position:relative;
    	width:80%;
    	height:auto;
    	margin-left: 16%;
    	background-color: white;
    }
     
    p {
    margin: 0
    }
     
    footer{
    	position: relative;
    	width:100%;
    	height: 100px;
    	background-color: black;
    }
    Nom : html.jpg
Affichages : 332
Taille : 513,1 Ko

  2. #2
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    c'est obligé d'être en XHTML ???

    en HTML5 ce truc se règle tout seul en Flexbox
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : Octobre 2014
    Messages : 12
    Points : 9
    Points
    9
    Par défaut
    Et beh voila, je ne connaissais pas flexbox.
    Je viens de passer mon doctype en HTML et utilisé la fonction display: flex.
    En retouchant le CSS, tout fonctionne.

    Merci

  4. #4
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    Donc, tu a changé de DocType ?
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : Octobre 2014
    Messages : 12
    Points : 9
    Points
    9
    Par défaut
    Tout a fait

    J'ai testé un petit peu flexbox.... c'est beaucoup mieux pour le responsive ^^

    Encore merci

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 983
    Points : 44 173
    Points
    44 173
    Par défaut
    Bonjour,
    le DOCTYPE n'a rien à voir la dedans puisque le modèle de boîte display:flex c'est du CSS. et non du HTML !

  7. #7
    Futur Membre du Club
    Homme Profil pro
    Technicien Help Desk
    Inscrit en
    Octobre 2014
    Messages
    12
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Technicien Help Desk

    Informations forums :
    Inscription : Octobre 2014
    Messages : 12
    Points : 9
    Points
    9
    Par défaut
    Oui pour être clair, j'ai modifié le Doctype.... mais en utilisant le Flexbox sans modifier le Doctype ca marche aussi

  8. #8
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    ben oui, on peut mettre du css3 conçu en 2009 dans un doctype finalisé en 2002 (XHTML 1.0).

    c'est la version du navigateur qui se démerde et on peut s’asseoir sur toute idée de cohérence.
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 983
    Points : 44 173
    Points
    44 173
    Par défaut
    ...dans un doctype finalisé en 2002 (XHTML 1.0).
    La DTD appliquée tiens compte des évolutions faites, version au jour de ce message
    $Revision: 1.1 $
    $Date: 2018/03/20 03:13:13 $

    c'est la version du navigateur qui se démerde ...
    pas bien compris ce que cela pouvait bien dire.

    En schématisant le navigateur c'est
    • un parseur (X)HTML/CSS, des milliers de lignes essentiellement liées aux corrections des erreurs.
    • un moteur de rendu CSS
    • un moteur JavaScript
    chacun à son propre rôle et la version de chacun de ces éléments peut évoluer indépendamment des autres.

    [EDIT] mot CSS mal placé .

  10. #10
    Expert confirmé Avatar de psychadelic
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    2 529
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 2 529
    Points : 4 740
    Points
    4 740
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    La DTD appliquée tiens compte des évolutions faites, version au jour de ce message
    $Revision: 1.1 $
    $Date: 2018/03/20 03:13:13 $
    la DTD que tu indique est un 1.1 et non la 1.0 comme elle est indiquée dans son code.



    Citation Envoyé par NoSmoking Voir le message
    c'est la version du navigateur qui se démerde ...
    pas bien compris ce que cela pouvait bien dire.

    En schématisant le navigateur c'est
    • un parseur (X)HTML, des milliers de lignes essentiellement liées aux corrections des erreurs.
    • un moteur de rendu CSS
    • un moteur JavaScript
    chacun à son propre rôle et la version de chacun de ces éléments peut évoluer indépendamment des autres.
    C'est pourtant simple quand j'écris que c'est la version du navigateur qui se démerde, ça veut dire que ça dépends de la version du navigateur.

    par exemple les FlexBox ne son pas supportées sur Internet Explorer version 9, et j'imagine que ce doit être la même chose pour les autres navigateurs en fonction de leur version
    «La pluralité des voix n'est pas une preuve, pour les vérités malaisées à découvrir, tant il est bien plus vraisemblable qu'un homme seul les ait rencontrées que tout un peuple.» [ René Descartes ] - Discours de la méthode

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 983
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 983
    Points : 44 173
    Points
    44 173
    Par défaut
    la DTD que tu indique est un 1.1 et non la 1.0 comme elle est indiquée dans son code.
    Les navigateurs se servent des règles présentent dans leur moteur et non pas celles de la version de la DTD renseignée. Elle sert néanmoins au navigateur pour savoir comment il doit traiter/rendre le document.

    En d’autres termes les navigateurs prennent en compte les dernières versions des DTD au moment de leur sortie. (on notera quand même qu'elles évolues peu)

    Il est vrai qu’actuellement mettre un <!doctype html>, en respectant la syntaxe XHTML plus rigoureuse si l’on le souhaite, permet de remplacer tous les « doctype » de la planète web et de dire au navigateur que l’on est en mode conforme aux standards.

    De la même façon, pour le CSS, une version ancienne de navigateur ne peut pas traiter des règles CSS qu’il n’a pas implémenté.

    Concernant le CSS, je retiendrais donc (là-dessus on est bien d’accord!)
    …ça veut dire que ça dépends de la version du navigateur.
    plutôt que
    c'est la version du navigateur qui se démerde et on peut s’asseoir sur toute idée de cohérence.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2003] Double recherche: somme de cellules à 100 pour un même individu
    Par arkhang dans le forum Macros et VBA Excel
    Réponses: 13
    Dernier message: 21/05/2014, 16h58
  2. [WD-2010] Sommaire auto décalé pour le même niveau de titre
    Par tite schtroumpfette dans le forum Word
    Réponses: 4
    Dernier message: 10/09/2013, 14h50
  3. Réponses: 1
    Dernier message: 31/05/2011, 17h33
  4. Height 100% pour DIV
    Par iGeek dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 06/09/2010, 22h39
  5. package ambiguïté pour des classes de même nom
    Par soad dans le forum Langage
    Réponses: 2
    Dernier message: 10/06/2004, 19h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo