Changement de la longueur d'une div en fonction du contenu d'une autre sur la meme page

**elec1984** · 25/06/2012, 15h09

Bonjour,j'ai un gros problème concernant la longueur du div, en effet j'ai deux div l'un à coté de l'autre(un à droite et l'autre à gauche) qui s'occupent toute la page,le premier div à gauche change la longueur par son contenu,alors ce que je souhaite c'est que le div à droite change aussi sa longueur automatiquement en fonction du celle du gauche( même largeur pour les deux)

J'ai fait ce petit code pour récupérer la largeur de celle du gauche et appliquer au div du droite mais cale n'est pas marché :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function getHeight() {
    var doc = document.getElementById('look_width'); //div gauche
    if (document.all) // ok I.E
    {
        H = doc.currentStyle.height;
    }
    else // ok FF
    {
        H = document.defaultView.getComputedStyle(doc, null).height;
    }
    document.getElementById('auto_height').style.height = H;  // div droite
}

Une idée?

**Watilin** · 25/06/2012, 15h58

Salut,

pas besoin de JavaScript pour ça, un peu de CSS suffit ! Et tu n'as que l'embarras du choix. Tu peux positionner tes div en absolu ou en relatif, ou encore les rendre flottantes.

Trouve un tuto sur le positionnement CSS

**elec1984** · 25/06/2012, 16h56

Je te remercie pour ta réponse,mais je ne peux changer le style de mes pages web parce que si je change le positionnement des div cela va influencer sur les autres div,en plus je ne pense pas que c'est une solution idéale puisque tu n'as pas bien compris mon problème,j'ai deux div en parallèle et je souhaite agrandir une par la longueur d'une autre dynamiquement et automatiquement...

**Watilin** · 25/06/2012, 18h39

Un truc comme ça ?

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Resize Sibling Columns</title>
<style type="text/css">/*<![CDATA[*/
body
{
        margin: 2em;
}
/*////////////////////////////////*/
.resizable
{
        overflow: auto;
}
.handle.vertical
{
        cursor: col-resize;
        height: 367px;
        width: 6px;
        float: left;
        border: outset 1px #ccc;
        margin: 3px 0;
        background: #ccc;
}
/*////////////////////////////////*/
#wrapper
{
        width: 1000px;
        height: 375px;
        border: solid 1px black;
        margin: 2em;
        background: silver;
}
#wrapper > .resizable
{
        float: left;
        width: 488px;
        min-width: 88px;
        max-width: 888px;
        height: 367px;
        margin: 3px;
        border: solid 1px gray;
        background: white;
}
/*]]>*/</style>
<script type="text/javascript">//<![CDATA[
 
var HandleMouse = {
        pressed: false,
        prevX: NaN,
        down: function mousedown( ev ) {
                HandleMouse.pressed = true;
                HandleMouse.prevX = ev.clientX;
                document.body.style.cursor = 'col-resize';
                ev.preventDefault();
        },
        move: function mousemove( ev ) {
                if (HandleMouse.pressed) {
                        var delta = ev.clientX - HandleMouse.prevX;
                        var movedL = HandleMouse.rewidth($left, delta),
                                movedR = HandleMouse.rewidth($right, -delta);
                        if (movedL && movedR) {
                                HandleMouse.prevX = ev.clientX;
                        };
                };
        },
        up: function mouseup( ev ) {
                HandleMouse.pressed = false;
                document.body.style.cursor = 'auto';
        },
        rewidth: function( $e, delta ) {
                var computed = getComputedStyle($e, null);
                var rx = /([\d.]+)px/;
                function getN( name ) {
                        return Math.floor(computed[name]
                                .match(rx)[1]);
                };
                var w = getN('width'),
                        min = getN('minWidth'),
                        max = getN('maxWidth');
                var newWidth = Math.min(max,
                        Math.max(min, w + delta));
                $e.style.width = newWidth + 'px';
                return w != newWidth;
        }
};
 
window.addEventListener('load', function windowLoad() {
        var $left = window.$left = document.getElementById('left'),
                $right = window.$right = document.getElementById('right'),
                $handle = document.getElementById('handle');
        $handle.addEventListener('mousedown', HandleMouse.down, false);
        window.addEventListener('mousemove', HandleMouse.move, false);
        window.addEventListener('mouseup', HandleMouse.up, false);
}, false);
 
//]]></script>
</head>
<body>
 
<div id="wrapper">
	<div id="left" class="resizable right">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
	</div>
	<div id="handle" class="handle vertical"></div>
	<div id="right" class="resizable left">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, 
	</div>
</div>
 
</body>
</html>

**elec1984** · 26/06/2012, 04h54

Merci Watilin,c'est génial ce code,mais je souhaite sans un scrollbar!Ce que je cherche c'est que dans ton exemple si j'ajoute un texte au div du droite alors sa longueur change bien sur(dans ton exemple c'est la longueur du scrollbar qui varie),simultanément je souhaite que le div du gauche change sa longueur pour que les deux reste avec meme longueur tout le temps...

**Watilin** · 26/06/2012, 15h06

Je ne comprends pas, tu parles de hauteur ou de largeur quand tu dis « longueur » ? Si c’est la hauteur, je persiste à penser qu’il s’agit d’un problème classique de CSS.

**elec1984** · 26/06/2012, 16h12

Oui je parle de la hauteur, tu peux voir ce site et tu peux voir comment les div dans la page,ce n'est de la même façon que je cherche mais cela te donne une idée claire :

http://www.sport.fr/

Tu vois que les trois div en parallèle ont le même hauteur!

**Watilin** · 26/06/2012, 16h54

Sur ce site, l'agencement ne repose que sur 2 divs, #column_left_mid et #column_right. La div #column_left_mid est elle-même séparée en deux. Utilise un inspecteur HTML (genre Firebug) pour examiner la structure, tu verras mieux ce que je veux dire.

L'image de fond est utilisée pour donner l'impression qu'il y a trois colonnes. C'est également une astuce CSS connue : il s'agit de la technique des colonnes factices. Je pense que c'est ce qu'il te faut. Fais une recherche

**elec1984** · 28/06/2012, 15h22

Bonjour Watilin,oui ta réponse est vraiment intéressante et c'est une bonne solution pour avoir des colonnes de meme hauteur,mais pour mon cas si je change mon style CSS j'aurai beaucoup de problèmes sur toutes les pages de mon site,c'est pour cela j'ai cherché une solution avec javascript,heureusement j'ai trouvé ce code avec un peu de jquery et ça marche très bien et il est compatible avec tous navigateurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type='text/javascript'>
    $(window).load(function(){
    var lh = $('#div.right').height();
     var rh = $('#div.left').height();
     if (lh >= rh){
    //alert('left : ' + lh);
    $('#div.left').height(lh);
    } else {
    //alert('right : ' + rh);
    $('#div.right').height(rh);
    };
    });
    </script>

Je passe à résolu,merci.

Changement de la longueur d'une div en fonction du contenu d'une autre sur la meme page

JavaScript

Discussions similaires

Partager

Partager