Div sur le panel de droit

**CLeBeR** · 04/05/2016, 21h35

Bonjour,
je voudrais fixer une div sur la partie droite de mon site, j'aimerais qu'elle prenne toute la hauteur de la page. De même, une autre div devrait s'afficher en bas de la page, juste en bas de mon graphique. J'utilise bootstrap et D3.js.

Voici mon code :

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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
 
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
 
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
 
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
 
</head>
 
<body>
    <label>
        <input type="file" id="files" name="files[]" multiple style="display: none;" />
        <span class="glyphicon glyphicon-export"></span>
    </label>
    <span class="glyphicon glyphicon-repeat" onclick="location.reload();"></span>
 
    <div id="containerGraphDependance"></div>
    <div id="rightpabel" class="col-md-4 col-md-offset-4" style="color: darkgreen; background-color: red">
        <div id="testbalise">this is a text</div>
    </div>
 
 
    <script>
        var links = [];
        d3.json("data.json", function(error, json) {
 
          links = json;
 
          var nodes_1 = {};
 
          links.forEach(function(link) {
            link.source = nodes_1[link.source] || (nodes_1[link.source] = {
              name: link.source,
              life: link.life,
              level: link.level
            });
            link.target = nodes_1[link.target] || (nodes_1[link.target] = {
              name: link.target,
              life: link.life,
              level: link.level
            });
          });
 
          //document.getElementById("containerGraphDependance").remove();
 
          // Compute the distinct nodes from the links.
 
 
          var width_1 = 960,
            height_1 = 500;
 
          var force_1 = d3.layout.force()
            .nodes(d3.values(nodes_1))
            .links(links)
            .size([width_1, height_1])
            .linkDistance(100)
            .charge(-400)
            .on("tick", tick)
            .start();
 
          var svg_1 = d3.select("body").append("svg")
            .attr("width", width_1)
            .attr("height", height_1);
 
          // Per-type markers, as they don't inherit styles.
          svg_1.append("defs").selectAll("marker")
            .data(["suit", "licensing", "resolved"])
            .enter().append("marker")
            .attr("id", function(d) {
              return d;
            })
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 15)
            .attr("refY", -1.5)
            .attr("markerWidth", 20)
            .attr("markerHeight", 20)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0,-5L10,0L0,5");
 
          var path_1 = svg_1.append("g").selectAll("path")
            .data(force_1.links())
            .enter().append("path")
            .attr("class", function(d) {
              return "link " + d.type;
            })
            .style("fill", "none").style("stroke", "black")
            .attr("marker-end", function(d) {
              return "url(#" + d.type + ")";
            });
 
 
          var circle_1 = svg_1.append("g").selectAll("circle")
            .data(force_1.nodes())
            .enter().append("circle")
            .attr("r", 20)
            .call(force_1.drag)
            .style("fill", "red")
            .on("click", click);
 
          function click(d) {
            var divProjectName = document.getElementById('ticket');
            divProjectName.innerHTML = 'Nom du projet : ' + d.name;
          }
 
          var text_1 = svg_1.append("g").selectAll("text")
            .data(force_1.nodes())
            .enter().append("text")
            .attr("x", 8)
            .attr("y", ".31em")
            .text(function(d) {
              return d.name;
            });
 
          // Use elliptical arc path segments to doubly-encode directionality.
          function tick() {
            path_1.attr("d", linkArc);
            circle_1.attr("transform", transform);
            text_1.attr("transform", transform)
          }
 
          function linkArc(d) {
            var dx = d.target.x - d.source.x,
              dy = d.target.y - d.source.y,
              dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
          }
 
          function transform(d) {
            return "translate(" + d.x + "," + d.y + ")";
          }
        });
 
    </script>

Voici un example en ligne du problème sur Plunker : https://plnkr.co/edit/z1pN7npg9imWBVwnuDHP?p=preview
Merci pour votre aide.

**Muchos** · 04/05/2016, 23h26

C'est une question qui concerne CSS. Lire notamment ce tutoriel sur les mises en page.

Div sur le panel de droit

HTML

Discussions similaires

Partager

Partager