[Résolu] Élément de liste sur toute la hauteur de son conteneur

Bonjour,

Sur l'une des pages du blog dont je m'occupe se trouve une liste non-ordonnée de titres de livres, sous le titre "Nos achats précédents". Cette liste se situe à l'intérieur d'une <div> en display: table-cell.

Je souhaiterais que le dernier élément de la liste se prolonge sur toute la hauteur restante de ce <div> (afin de pouvoir appliquer un arrondi à ce dernier élément, pour éviter, sous Chrome ou IE9/10 par exemple, que l'angle du conteneur ne soit un angle droit).

Voici le code HTML utilisé :

<div class="conteneur">
	
	<div class="left-part">
		<h3>Phares (Jean Guichard)</h3>
		<p class="date"><abbr title="samedi 02 juin 2012">02.06.12</abbr></p>
		<p>Bla bla bla résumé du livre Phares de Jean Guichard</p>
	</div>
	
	<div class="right-part">
		<h3>Nos achats précédents</h3>
		<ul>
			<li class="post">
				<a href="url_lien_1">Sans sucres ajoutés (Cookie Allez)</a>
			</li>
			<li class="post odd">
				<a href="url_lien_2">Jours de chance (Philippe Adam)</a>
			</li>
			<li class="post">
				<a href="url_lien_3">Informatique...</a>
			</li>
		</ul>
	</div>
	
</div>

Et voici l'essentiel du code CSS qui lui est appliqué :

.dc-adultes .conteneur { display: table; width: 100%; table-layout: fixed; }
.dc-adultes .conteneur .left-part { float: none; display: table-cell; vertical-align: top; width: 549px; }
.dc-adultes .conteneur .right-part { float: none; display: table-cell; vertical-align: top; width: 270px; }

Une idée, donc, pour que le dernier élément <li> occupe toute la hauteur de la div qui le contient ? Merci de votre aide !
Modifié par Fix (21 Jun 2012 - 20:36)

Hello,

À part Grid Layout ou Flex Box en CSS3, qui sont tous les deux à l'état de brouillons et très peu implémentés dans les navigateurs, pas grand chose à faire ici.

Ce serait possible avec un tableau de mise en page, un rowspan à gauche, et d'autres modifs, mais ça imposerait une structure HTML très lourde (et le besoin de savoir à l'avance le nombre d'items à droite pour renseigner la valeur de rowspan). Possible aussi en virant le H3, en mettant plein de display:table|table-row et de height:100%, pour un résultat mitigé. Bref, rien qui en vaille la peine.

C'est quoi le fond du problème au juste? Parce que dans l'absolu il n'y a pas d'intérêt particulier à avoir ce dernier item qui prend toute la hauteur disponible (tandis que les autres items se comportent différemment).

Merci pour cette réponse détaillée.

L'objectif était le suivant : les coins des conteneurs "left-part" et "right-part" sont arrondis ; or, sous Chrome ou IE9 ou 10, lorsque le dernier élément <li> se trouve en bas de la colonne de droite (la <div class="right-part"), le coin redevient à angle droit - comme on pouvait s'y attendre, mais ce n'est pourtant pas le cas sous Firefox qui conserve l'arrondi dans ce cas -.

Donc, si le dernier élément <li> allait jusqu'en bas de la div, on pourrait lui appliquer un angle inférieur-droit arrondi, et ça passerait sous tous les navigateurs...
Modifié par Fix (21 Jun 2012 - 17:10)

Moi sur Chrome je résous le problème ainsi:

.right-part {
  ...
  overflow: hidden;
}

Pas sûr que ça marche sur IE 9-10, car c'est une question d'implémentation qui peut être plus ou moins bien fichue; à tester, donc.

En passant, tu peux simplifier ton code:
- en utilisant le raccourci border-radius plutôt que les propriétés détaillées;
- en laissant tomber les versions -webkit- et -moz- qui ne sont plus nécessaires dans les versions les plus courantes des navigateurs utilisant WebKit et Gecko.
Ce qui nous donne juste:

.right-part {
  ...
  border-radius: 0 15px 15px 0;
  overflow: hidden;
}

Merci ! Le overflow: hidden; résout le problème, aussi bien sous Chrome que sous IE 9. Je pensais pourtant que ça faisait partie des choses que j'avais déjà essayées... Il faut croire que non, manifestement. C'est un comportement assez logique, qui plus est...

fvsch a écrit :
en laissant tomber les versions -webkit- et -moz- qui ne sont plus nécessaires dans les versions les plus courantes des navigateurs utilisant WebKit et Gecko.

À la lecture du lien que tu as fourni, je n'en reviens tout simplement pas. À se demander pourquoi je m'étais embêté avec ces préfixes propriétaires... Le blog n'a qu'un peu plus d'un an, j'aurais sans doute déjà pu m'en passer à ce moment-là. Bref, j'ai allégé mon code, donc. Merci !
Modifié par Fix (21 Jun 2012 - 20:36)