28172 sujets

CSS et mise en forme, CSS3

Déjà bonjour à tous Smiley biggrin

Alors voila mon soucis j'ai une div appelée "conteneur" sur la gauche qui doit être en hauteur variable selon son contenu et à droite de celle-ci une autre div appelée "navig" qui doit faire la même hauteur avec un overfow-y qui contient une liste de vignettes

J'ai réussi a obtenir ce que je voulais mais du avoir recours a javascript pour appliquer la hauteur de "conteneur" à "navig" je voudrais le même résultat mais sans javascript (je précise que je me suis arrachée les cheveux quelques heures avant de bidouiller du javascript Smiley bawling )

J'aurais besoin de vos lumière pour le faire en css pure


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
<title>MMA</title>
<style type="text/css">
<!--
body,html{margin:0 0 0 0;width:100%;height:100%;background-color:#ccc;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.h100{height:100%;}
.menu{width:950px;height:30px;background-color:#333;}
.format{width:155px;height:155px;margin:0px 5px 5px 5px;background-color:#000;}
-->
</style>
</head>
<body>
	<center>
        <div class="h100" style="width:970px;background-image:url(images/ombre_bord.png);">
            <div class="h100" style="width:950px;background-color:#666;">
                <div style="width:950px;height:165px;"></div>
                <div class="menu"></div>
                <div id="conteneur" class="h100" style="float:left;width:745px;background-color:#fff">
                    <br>
                    <div style="width:705px;height:305px;margin:0px 20px 10px 20px;background-color:#999;"></div>
                    <br><br><br><br><br><br><br><br><br><br><br>
                    <textarea name=""></textarea>
                    <br><br>
                    Hauteur de bloc variable
                </div>
                <div style="float:right;width:205px;background-color:#ccc">
                    <div id="navig" style="width:205px;overflow-y:scroll;">
                        <center>
                            <br>
                            <div class="format"></div>Prévu 165x165<br><br>
                            <div class="format"></div>Prévu 165x165<br><br>
                            <div class="format"></div>Prévu 165x165<br><br>
                            <div class="format"></div>Prévu 165x165<br><br>
                            <div class="format"></div>Prévu 165x165<br><br>
                        </center>
                    </div>
                </div>
                <p style="clear:both;height:0px;"></p>
                <div style="width:950px;height:165px;">
                </div>
            </div>
        </div>
        <div style="width:970px;height:10px;background-image:url(images/ombre_bas.png);"></div>
    </center>
    <br>
    <script type="text/javascript">
	<!--
		var divHeight;
		var obj = document.getElementById('conteneur');
		
		if (obj.offsetHeight) {divHeight=obj.offsetHeight;}
		else if (obj.style.pixelHeight){divHeight=obj.style.pixelHeight;}
		
		document.getElementById('navig').style.height = divHeight+'px';
	//-->
	</script>
</body>
</html>


d'avance merci pour votre aide Smiley smile
lol c'est marrant je revenais poster une soluce (après quelques poignés de cheveux perdu... encore Smiley lol ) et c'est à peu près la réponse que ta mis à savoir joué avec les position relative et absolute par contre pas moyen de le gérer avec des div ya les float qui foutte le bordel j'ai été obligé de caler ça dans du tableau...

si quelqu'un à une idée pour remplacer mon tableau par une div je suis preneur, mais bon c'est pas encore trop grave déjà me suis débarasser de mon javascript chuis content Smiley smile


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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" />
<title>MMA</title>
<style type="text/css">
<!--
body,html{margin:0 0 0 0;width:100%;height:100%;background-color:#ccc;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.h100{height:100%;}
.menu{width:950px;height:30px;background-color:#333;}
.format{width:155px;height:155px;margin:0px 5px 5px 5px;background-color:#000;}
-->
</style>
</head>
<body>
	<center>
        <div class="h100" style="width:970px;background-image:url(images/ombre_bord.png);">
            <div class="h100" style="width:950px;background-color:#999;">
                <div style="width:950px;height:165px;"></div>
                <div class="menu"></div>
                <table class="h100" cellpadding="0" cellspacing="0" border="0" style="width:950px;">
                	<tr>
                		<td valign="top" class="h100" style="width:705px;padding:20px;background-color:#666;">
                        	<div style="width:705px;height:305px;background-color:#999;"></div>
                            <br><br><br><br><br><br><br><br><br><br><br>
                            <textarea name=""></textarea>
                            <br><br>
                            Hauteur de bloc variable
                        </td>
                        <td valign="top" class="h100" style="width:205px;background-color:#ccc;">
                        	<div class="h100" style="position:relative;width:100%;">
                                <div id="navig" style="height:inherit;position:absolute;width:205px;overflow-y:scroll;">
                                    <center>
                                    	<div style="height:20px;">&nbsp;</div>
                                        <div class="format"></div>Prévu 165x165<br><br>
                                        <div class="format"></div>Prévu 165x165<br><br>
                                        <div class="format"></div>Prévu 165x165<br><br>
                                        <div class="format"></div>Prévu 165x165<br><br>
                                        <div class="format"></div>Prévu 165x165<br><br>
                                    </center>
                                </div>
                            </div>
                        </td>
                	</tr>
                </table>
                <div style="width:950px;height:165px;"></div>
            </div>
        </div>
        <div style="width:970px;height:10px;background-image:url(images/ombre_bas.png);"></div>
    </center>
    <br>
</body>
</html>