Map qui doit occuper toute la surface disponible

**bza88** · 12/12/2018, 12h55

salut,
je suis en train de personnaliser un thème bootstrap 3 (ace admin) que j'ai récupéré sur internet
en effet, je voudrais insérer une map (osm ou google map) tout a droite de ma sidebar. je veux qu'elle occupe toute la largeur et la hauteur disponible a droite sans toutefois passer en dessous de la sidebar.
quelles caractéristiques (width et surtout height, etc... ) dois-je donner a ce container pourqu'il s'adapte a la taille de chaque écran.

voici une capture d'ecran de ma page actuellement.

Nom : ca.png
Affichages : 735
Taille : 316,6 Ko

Nom : ca.png
Affichages : 735
Taille : 316,6 Ko

je veux que la carte prenne toute la largeur et la hauteur disponible en dessous du breadcrumbs et a droite de la sidebar.
voici mon code

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
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 
<div class="main-content">
                <div class="main-content-inner">
                    <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                        <ul class="breadcrumb">
                            <li>
                                <i class="ace-icon fa fa-home home-icon"></i>
                                <a href="#">Home</a>
                            </li>
 
                            <li>
                                <a href="#">UI &amp; Elements</a>
                            </li>
                            <li class="active">Content Sliders</li>
                        </ul><!-- /.breadcrumb -->
                    </div>
 
                    <div class="page-content">
                        <div class="ace-settings-container" id="ace-settings-container">
                            <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                                <i class="ace-icon fa fa-cog bigger-130"></i>
                            </div>
 
                            <div class="ace-settings-box clearfix" id="ace-settings-box">
                                <div class="pull-left width-50">
                                    <div class="ace-settings-item">
                                        <div class="pull-left">
                                            <select id="skin-colorpicker" class="hide">
                                                <option data-skin="no-skin" value="#438EB9">#438EB9</option>
                                                <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                                <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                                <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                            </select>
                                        </div>
                                        <span>&nbsp; Choose Skin</span>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-navbar" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-sidebar" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-breadcrumbs" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2 ace-save-state" id="ace-settings-add-container" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-add-container">
                                            Inside
                                            <b>.container</b>
                                        </label>
                                    </div>
                                </div><!-- /.pull-left -->
 
                                <div class="pull-left width-50">
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-hover" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-hover"> Submenu on Hover</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-compact" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-compact"> Compact Sidebar</label>
                                    </div>
 
                                    <div class="ace-settings-item">
                                        <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-highlight" autocomplete="off" />
                                        <label class="lbl" for="ace-settings-highlight"> Alt. Active Item</label>
                                    </div>
                                </div><!-- /.pull-left -->
                            </div><!-- /.ace-settings-box -->
                        </div><!-- /.ace-settings-container -->
                        <div id="main" class="map">
                            <div id="map" class=""></div>
                        </div>
 
                        <div class="row">
                            <div class="col-xs-12">
                                <!-- PAGE CONTENT BEGINS -->
                                <div id="bottom-menu" class="modal aside" data-fixed="true" data-placement="bottom" data-background="true" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-body container">
                                                <div class="row">
                                                    <div class="col-sm-5 col-sm-offset-1 white">
                                                        <h3 class="lighter">Bootstrap Grid &amp; Elements</h3>
                                                        With dark modal backdrop
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- /.modal-content -->
 
                                        <button class="btn btn-yellow btn-app btn-xs ace-settings-btn aside-trigger" data-target="#bottom-menu" data-toggle="modal" type="button">
                                            <i data-icon2="fa-chevron-down" data-icon1="fa-chevron-up" class="ace-icon fa fa-chevron-up bigger-110 icon-only"></i>
                                        </button>
                                    </div><!-- /.modal-dialog -->
                                </div>
 
                                <div id="right-menu" class="modal aside" data-body-scroll="false" data-offset="true" data-placement="right" data-fixed="true" data-backdrop="false" tabindex="-1">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header no-padding">
                                                <div class="table-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                        <span class="white">&times;</span>
                                                    </button>
                                                    Based on Modal boxes
                                                </div>
                                            </div>
 
                                            <div class="modal-body">
                                                <h3 class="lighter">Custom Elements and Content</h3>
 
                                                <br />
                                                With no modal backdrop
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                1
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                2
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                <br />
                                                3
                                            </div>
                                        </div><!-- /.modal-content -->
 
                                        <button class="aside-trigger btn btn-info btn-app btn-xs ace-settings-btn" data-target="#right-menu" data-toggle="modal" type="button">
                                            <i data-icon1="fa-plus" data-icon2="fa-minus" class="ace-icon fa fa-plus bigger-110 icon-only"></i>
                                        </button>
                                    </div><!-- /.modal-dialog -->
                                </div>
                                <!-- PAGE CONTENT ENDS -->
                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div><!-- /.page-content -->
                </div>
            </div><!-- /.main-content -->

le code css

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
 
.map{
    width: 100%;
    height: 500px;
}
#map{
    height: 100%;
    width: 100%;
}
 
.page-content {
    background-color: blue;
    position: relative;
    margin: 0;
    /*    padding: 8px 20px 24px*/
}

comme vous pouvez le voir, mon probleme est au niveau de la definition de la hauteur de la classe .map. une hauteur a 100% n'affiche pas la carte.

**kevin254kl** · 13/12/2018, 21h16

salut,

il faut regarder dans la console du navigateur quel style est appliqué à la map. peut-être un auto en height sur la map fera l'affaire? test aussi un min-height à 100%.

**bza88** · 14/12/2018, 09h33

salut. j'ai appliqué cette règle "pour que height:100% fonctionne sur un élément il faut que son parent est un height défini.
Si celui-ci est en % aussi il faudra remonter au parent plus haut. Et ainsi de suite jusqu'a la balise html." pour que ma carte occupe 100% de la hauteur. sauf que je ne vois plus le pied de page de la carte comme sur l'image ci-dessus. voici mon css

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.container-fluid{
    padding-left: 0;
    padding-right: 0;
}
.container-fluid.map{
    width:100%;
    height: 100%;
}
#map{
    position: fixed;
    width: 100%;
    height: 100%;
}

voici le rendu après avoir appliqué la règle énoncée ci-dessus.
Nom : 45.png
Affichages : 594
Taille : 352,2 Ko

je voudrais que le pied de page sois visible. quelle taille dois-je donner mon ".container-fluid.map " pour que le pied de page sois visible ?

j'ai du donner un min-height de 100% a tous les éléments parents de mon conteneur (.container.map). mais la carte déborde. je ne vois plus son pied de page

**kevin254kl** · 20/12/2018, 02h19

Salut,

Si tu appliques un height à 90% sur ta map, tu peux utliser le max-height?

**bza88** · 20/12/2018, 09h20

salut, sa ne changera pas grande puisqu'il est en position: fixed

sinon voici ou j'en suis actuellement :
#map doit occuper 100% de .container-fluid.map en largeur et en hauteur. je l'ai mis en position: fixed parce qu’il n’était pas visible avec la position par Default. il n'est visible qu'en position fixed.
code css actuel:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.container-fluid{
    padding-left:0px;
    padding-right:0px
}
.container-fluid.map{
    width:100%;
    height: 540px;
    border:5px dotted #4EBC30;
}
#map{
    width:100%;
    height: 100%;
}

je ne sais pas comment coder height:540px pour qu'il soit automatique c'est a dire pour qu'il varie en fonction de la taille des écrans. qu'elle occupe la totalité de l'espace disponible en largeur et en hauteur sur tous les écrans sans déborder les bords.
voici une capture d’écran avec height: 540px avec retrait de position:fixed sur #map.

Nom : c2.jpg
Affichages : 602
Taille : 174,9 Ko

Nom : c2.jpg
Affichages : 602
Taille : 174,9 Ko

je voudrais que la carte sois ainsi sur tous les écrans d'ordinateurs. comment coder height: 540px ?

**NoSmoking** · 21/12/2018, 14h31

Bonjour,
j'ai du mal à cerner, tu changes le CSS en ajoutant de nouvelles « class » mais tu ne fournies pas le code HTML correspondant.

Peux être devrais tu mettre une page test en ligne.

**bza88** · 21/12/2018, 14h36

salut, j'ai géré ce cas ainsi:

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
 
#map{
    display: block;
    position: fixed;
    width: 100%;
    width:-webkit-calc(100% - 190px);/*pour google Chrome*/
    width: -moz-calc(100% - 190px); /*pour Mozilla Firefox*/
    width: -o-calc(100% - 190px); /*pour opera*/
    width: -ms-calc(100% - 190px); /*pour opera*/
    width: calc(100% - 190px); /* */  
    height: 100%;
    height: -webkit-calc(100% - 85px);/*pour google Chrome*/
    height: -moz-calc(100% - 85px); /*pour Mozilla Firefox*/
    height: -o-calc(100% - 85px); /*pour opera*/
    height: -ms-calc(100% - 85px); /*pour opera*/
    height: calc(100% - 85px); /* */  
 
}

**NoSmoking** · 21/12/2018, 14h56

comme tu as une position: fixed utilise dans ce cas les propriétés right et bottom.

Code :

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

1
2
3
4
5
6
#map{
  display: block;
  position: fixed;
  right: 190px;
  bottom: 85px;
}

**bza88** · 21/12/2018, 15h02

salut, je n'ai pas de résultat attendu avec ta solution sinon j'ai préoccupation :
pourquoi ma carte n'est visible qu'en position : fixed ?
si je retire cette propriété ma carte n'est plus visible. peux-tu m'expliquer ce comportement ?
merci

**NoSmoking** · 23/12/2018, 18h13

si je retire cette propriété ma carte n'est plus visible. peux-tu m'expliquer ce comportement ?

simplement parce que le conteneur n'occupe aucune surface à l'écran.

Ce que je te propose c'est de repartir d'un gabarit simple, pas envie de décortiquer ton actuelle page, en utilisant les « flex -boxes ».

Exemple de la mise en place d'une carte avec ce principe.

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Gabarit simple</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1921573">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.0/dist/leaflet.css">
<style>
html,
body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
  background: #EFEFEF;
  display: flex;    /* pour support IE */
  width: 100%;
}
main {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;  
}
header {
  flex: 0 0 auto;
}
.conteneur {
  display: flex;
  flex: 1 1 auto;
}
  .gauche {
    flex: 0 0 15em;
    background: #DEF;
  }
  .droite {
    flex: 1 0 auto;
    background: #CDE;  
  }
footer {
  flex: 0 0 auto;
}
</style>
</head>
<body>
  <main>
    <header>
      <h1>Gabarit simple</h1>
    </header>
    <div class="conteneur">
      <div class="gauche">Zone gauche</div>
      <div class="droite" id="carte">Zone carte</div>
    </div>
    <footer>&lt;footer&gt;</footer>
  </main>  
<script src="https://unpkg.com/leaflet@1.3.0/dist/leaflet.js"></script>
<script>
var oMap = new L.Map("carte", {
  zoom: 6,
  center: new L.latLng([47, 1])
});
var OSMLayer = new L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
  attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
});
oMap.addLayer(OSMLayer);
</script>
</body>
</html>

Nota : on pourrait faire légèrement plus simple mais ici on reste compatible IE10-11

Map qui doit occuper toute la surface disponible

CSS

Discussions similaires

Partager

Partager