28173 sujets

CSS et mise en forme, CSS3

[Résolu][Div] Hauteur maximale possible de son père

Pages :
Bonjour,

J'ai un petit soucis avec une histoire de div imbriqués.
Voici l'url ou vous pourrez avoir un apperçu de mon pb : http://fieldset.cliranet.com/plop.html

J'ai vraiment simplifier le pb au maximum pour que vous ne soyez pas encombrez par du superflu.

Alors le problème c'est que le div bleu prend effectivement 100% de la hauteur du div parent, mais étant donné que j'ai également dans ce div parent un titre qui fait 30px de hauteur, et bien mon cadre bleu dépasse de 30px en bas, du coup on ne voit plus la scrollbar.

Le div à fond bleu prend en fait une hauteur de 100%+30px 'en gros'...

Ma question est donc; puis-je dire à ce div à fond bleu (#divMessage) de prendre la taille restante de son bloc parent ?

Si vous avez une solution alternative avec autre chose qu'un div je suis preneur bien évidement.

Je vous remercie beaucoup, j'attend avec impatience vos réponse. Je me tiens à votre disposition pour tout points sur lesquels vous voudriez être éclairé. Smiley biggthumpup Smiley biggthumpup Smiley biggthumpup Smiley biggthumpup Smiley chew
Modifié par fieldset (13 Mar 2007 - 22:43)
Nan mon problème est que le bas de ma scrollbar est masqué.
Je veux que mon div à fond bleu prenne simplement toute la hauteur qui est disponible pour lui.

Si je redimensionne mon div parent (#message), je veux que mon div enfant (#divMessage) continu de prendre la taille maximale disponible.

Je pourrais donner une hauteur en pixel à ce cadre mais je ne saurais jamais quel sera la hauteur du div parent c'est pour ça que je cherche une solution disonsn "automatique"
oui mais pourquoi veux tu faire ca ? Parce que je ne suis pas sure que ce soit possible en css pur.
Qu'est ce qui donne l'impression qu'une div est d'une hauteur max ? En général c'est le background. Donc tu peux contourner ce problème en laissant une hauteur naturelle à ton second bloc mais en définissant le background sur ton bloc conteneur.
En fait je suis en train de faire une appli graphique.

Je fais un drag and drop avec également un resize.
Dans la fenêtre ou il y a la scrollbar s'affiche des messages, qui sont chargé via l'ajax, et donc le contenu de ce div augmentera au fur et à mesure, d'ou la nécessitée d'une scrollbar.

En fait je tente de reproduire l'quivalent d'une fenetre de navigateur.

Si tu redimensionne ton navigateur, la scrollbar verticale reste bien au dessus de la abrre de statut et en dessous de la barre d'adresses et tous les autres boutons.

Je sais pas si tu comprends mieux mon soucis ? :s
Si la hauteur de ta boite conteneur n'est pas fixe, je pense que le mieux est d'utiliser du javascript pour récupérer sa taille au chargement de la page, ensuite tu fixe la taille de ta deuxième boiteen faisant taille de la boite 1 - taille du titre.
En effet, tu ne peux pas mélanger des tailles fixes et des tailles en % dans tes boites css.
L'autre solution, c'est de régler la taille de ton titre en %, mais ca peut êre très génant graphiquement.

Si quelqu'un d'autre une idée, il est le bienvenue !
BOn ben tu arrive à mes précedentes conclusions lol Smiley decu

Je me suis dit que je n'avais pas tout envisagé mais je crois malheureusement que si...

J'ai déjà commencé avec le Js, donc je vais poursuivre sur cette voix. En redimensionnant en même temps mon div à fond bleu ainsin que mon div conteneur.

Bref si quelqu'un pense quand même à une solution...?

Merci quand même yahrou Smiley smile
Salut,

je ferais comme ceci pour ma part.

. pas de hauteur pour #message

. réduction du texte, font-size, pour le h1 + un min height, et non un height, de 30px. En utilisant la méthode éprouvée pour gérer la non implémentation de min-height par IE inférieur à IE7

.hauteur de 220px pour #divMessage.

donc

<style type="text/css">
*{
margin:0;
padding: 0;
}

#message
{
overflow: hidden;
position: absolute;
top: 50px;
left: 50px;
/*height: 250px;*/
width: 300px;
border: 2px solid grey;
}

#h1Message
{
background: green;
min-height: 30px;
font-size:1.3em;
}

#divMessage
{
overflow: auto;
background: blue;
height: 220px;
}
</style>


et ensuite

<!--[if lt IE 7]>

<style type="text/css">
#h1Message
{
height: 30px;
}
</style>
<![ endif]--><!-- [b]Sans espace après le crochet ouvrant[/b] -->

Modifié par Christian Le Bouler (12 Mar 2007 - 18:47)
Salut,

Un petit bidouillage pas trop esthétique sauf si tu prends la même couleur de background ... M'enfin
*{
margin:0;
padding: 0;
}

#message
{
position: absolute;
top: 50px;
left: 50px;
height: 250px;
width: 300px;
border: 4px solid grey;
}

#h1Message
{
width: 280px;
background: green;
height: 30px;
position: absolute;
}

#divMessage
{
overflow: auto;
background: blue;
height: 100%;
}

.debut
{
margin-top: 30px;
}
</style>
</head>
<body>

<div id="message">
	<h2 id="h1Message">Message</h2>

	<div id="divMessage">
	<p class="debut">0</p>
	1<br />
	2<br />
	3<br />
	4<br />

	5<br />
	6<br />
	7<br />
	8<br />
	9<br />
	10<br />

	11<br />
	12<br />
	13<br />
	</div>
</div>

</body>
Merci à vous deux pour vos solutions.
Cependant, Christian Le Bouler, ta solution ne fonctionne pas si la hauteur de "message" augmente et c'est que je recherche. Car ta solution pouvait se résumer à une auteur de 30px pour le titre, 200pour le divMessage et 230 pour message et j'aurais obtenu le même résultat... Smiley decu

Ta solution ghost se rapproche peut-être un peu plus de ce que je recherche techniquement mais visuellement ça n'ira plus du tout Smiley decu , la scrollbar remonte trop haut Smiley decu

Je pensais à une autre piste...

Est-ce qu'il est possible de placer le titre en dehors du conteneur message mais de le coller à celui-ci (en tenant biencompte que le conteneur pourra bouger et qu'il faudra que le titre reste bien au dessus)

Avec une histoire de marge négative et une position absolue ?
Et avec un tableau dans lequel la ligne du bas incluerait un div avec un overflow auto ?

Mais je crois qu'on peut pas donner de taille fixe à un table ? Smiley decu
fieldset a écrit :

Cependant, Christian Le Bouler, ta solution ne fonctionne pas si la hauteur de "message" augmente et c'est que je recherche.


il me semble au contraire que c'est quand la hauteur de message (si tu parles bien du <h1>) s'agrandit qu'elle fonctionne le mieux.
Modifié par Christian Le Bouler (12 Mar 2007 - 19:44)
Christian Le Bouler a écrit :


il me semble au contraire que c'est quand la hauteur de message (si tu parles bien du <h1>) s'agrandit qu'elle fonctionne le mieux.


Arf on s'est mal compris lol Smiley confused

"message" c'est le nom du cadre conteneur dans ma source

message = cadre conteneur
h1Message = titre dans le conteneur
divMessage = cadre censé prendre le reste de la hauteur

n'y a til donc pas moyen de faire agir un div de la même manière qu'il se comporte en largeur ? (à savoir prendre toute la largeur) Smiley decu
Re,

juste une modification du code précedent.

*{
margin:0;
padding: 0;
}

#message
{
position: absolute;
top: 50px;
left: 50px;
height: 250px;
width: 300px;
border: 2px solid grey;
}

#h1Message
{
width: 300px;
background: green;
height: 30px;
position: absolute;
top: -32px;
}

#divMessage
{
overflow: auto;
background: blue;
height: 100%;
}
Ah c'est genial !! Smiley lol

c'est ce que j'essayais de faire en sortant le titre mais il était tjr caché chez moi lol Smiley lol

BOn par contre dernier petit soucis :s

Le cadre message est susceptible de voir sa largeur modifié également alors du coup le titre :s

Merci milles fois encore Smiley smile

Si jamais tu as encore une solution pour contrer ce pb de largeur... Smiley smile
Re,

Tu n'as quèà aligner le width du #message et celui du #h1Message à la même valeur (300px dans ton exemple)
donc je suis obligé de faire ça en javascript alors...?

EDIT :

Je suis bette lol il m'a simplement suffit de mettre un width: 100% et il prend la largeur maximale de son parent Smiley smile

Merci encore pour toutes ces infos précieuses et ta solution Smiley smile
Modifié par fieldset (13 Mar 2007 - 09:36)
Pages :
Sujet clos
Aller à