Discussion :

[bza88]

salut,

je sais qu'une DIV (élément de type block) occupe automatiquement toute la largeur disponible (sauf exception lorsqu'il est en position absolute).

comment faire pour que la même DIV occupe toute la hauteur disponible de son élément parent ? peu importe la taille de l’écran

[kevin254kl]

Bonjour,

peut-être avec min-width et min-height? on peut voir ton code?

[bza88]

voici le code html, lignes concernées 168 à 170

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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<div class="main-container ace-save-state" id="main-container">
            <script type="text/javascript">
                try {
                    ace.settings.loadState('main-container')
                } catch (e) {
                }
            </script>
 
            <div id="sidebar" class="sidebar sidebar-fixed responsive ace-save-state sidebar-scroll">
                <script type="text/javascript">
                    try {
                        ace.settings.loadState('sidebar')
                    } catch (e) {
                    }
                </script>
 
                <div class="sidebar-shortcuts" id="sidebar-shortcuts">
                    <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                        <button class="btn btn-success">
                            <i class="ace-icon fa fa-signal"></i>
                        </button>
 
                        <button class="btn btn-info">
                            <i class="ace-icon fa fa-pencil"></i>
                        </button>
 
                        <button class="btn btn-warning">
                            <i class="ace-icon fa fa-users"></i>
                        </button>
 
                        <button class="btn btn-danger">
                            <i class="ace-icon fa fa-cogs"></i>
                        </button>
                    </div>
 
                    <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                        <span class="btn btn-success"></span>
 
                        <span class="btn btn-info"></span>
 
                        <span class="btn btn-warning"></span>
 
                        <span class="btn btn-danger"></span>
                    </div>
                </div><!-- /.sidebar-shortcuts -->
                <ul class="nav nav-list">
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
                    <li class="" >
                        <div class="container-fluid img-responsive bg-li0">
 
                        </div>
                    </li>
 
                </ul><!-- /.nav-list -->
                <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
                    <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
                </div>
            </div>
 
            <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="container-fluid map">
                            <div id="map" class=""></div>
                        </div> <!--  je voudrais que cette zone occupe tout l'espace restant -->
 
                        <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 -->
        </div><!-- /.main-container -->

[bza88]

voici 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
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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
 
@import url('http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css');
.main-content,
body,
html {
    min-height: 100%;
    padding: 0;
}
html {
    position: relative
}
 
body {
    background-color: #E4E6E9;
    padding-bottom: 0;
    font-family: 'Open Sans';
    font-size: 13px;
    color: #393939;
    line-height: 1;
    overflow: hidden;
}
.main-container:before {
    display: block;
    content: "";
    position: absolute;
    z-index: -2;
    width: 100%;
    max-width: inherit;
    bottom: 0;
    top: 0;
    background-color: red;
}
 
.main-container.container,
.rtl .main-container.container {
    padding-left: 0;
    padding-right: 0
}
 
.main-container.container:before {
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    width: inherit
}
 
@media (max-width:767px) {
    .main-container.container:before {
        -webkit-box-shadow: none;
        box-shadow: none;
        width: 100%;
        height: 100%;
    }
}
 
.main-content {
    margin-left: 0;
    padding: 0
}
 
.main-content:after,
.main-content:before {
    content: " ";
    display: table
}
.main-content:after {
    clear: both
}
 
.sidebar+.main-content {
    margin-left: 190px
}
 
.page-content {
    background-color: blue;
    position: relative;
    margin: 0;
    height: 100%;
    /*    padding: 8px 20px 24px*/
}
.main-content-inner {
    float: left;
    width: 100%
}
 
.main-content .sidebar:before {
    top: 150px
}
 
    body.mob-safari .sidebar.h-sidebar+.main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
        top: 131px
    }
    body.mob-safari .sidebar.h-sidebar.no-gap+.main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
        top: 114px
    }
    body.mob-safari .sidebar.h-sidebar.menu-min+.main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
        top: 106px
    }
    body.mob-safari .sidebar.h-sidebar.menu-min.no-gap+.main-content .sidebar.sidebar-fixed:not(.h-sidebar) {
        top: 89px
    }
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar):before {
        top: 150px
    }
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar) .nav-list {
        padding-top: 3px
    }
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar) .sidebar-shortcuts~.nav-list,
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar) .sidebar-shortcuts~.nav-wrap-up .nav-list {
        padding-top: 0
    }
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar) .sidebar-shortcuts {
        padding-top: 3px;
        min-height: 43px
    }
    .h-navbar.navbar-fixed-top+.main-container .sidebar:not(.h-sidebar).menu-min .sidebar-shortcuts-large {
        line-height: 40px
    }
    .h-navbar.navbar-fixed-top+.main-container .main-content .sidebar:not(.h-sidebar) .nav-list {
        padding-top: 0
    }
    .h-navbar.navbar-fixed-top+.main-container .main-content .sidebar.sidebar-fixed {
        z-index: 1026
    }
    .main-content .h-sidebar {
        padding-top: 1px;
        margin-top: 0
    }
    .main-content .h-sidebar:before {
        display: none
    }
    .main-content .h-sidebar+.page-content {
        margin-left: auto
    }
    .main-content .h-sidebar.sidebar-fixed {
        left: 190px
    }
    .main-content .h-sidebar.sidebar-fixed+.page-content {
        margin-top: 74px
    }
    .main-content .h-sidebar.sidebar-fixed.menu-min+.page-content {
        margin-top: 49px
    }
    .main-content .h-sidebar.menu-min .nav-list>li>a {
        padding: 8px 12px 7px
    }
    .sidebar.compact+.main-content .h-sidebar.sidebar-fixed {
        left: 105px
    }
    .sidebar.menu-min+.main-content .h-sidebar.sidebar-fixed {
        left: 43px
    }
    .navbar.navbar-fixed-top+.main-container .main-content .h-sidebar.sidebar-fixed {
        padding-top: 3px
    }
}
 
.container.main-container .sidebar+.main-content .h-sidebar.sidebar-fixed {
    left: auto;
    right: auto
}
@media (min-width:992px) {
    .container.main-container .sidebar.compact+.main-content .h-sidebar.sidebar-fixed {
        width: 859px
    }
    .container.main-container .main-content .h-sidebar.sidebar-fixed {
        width: 964px
    }
    .container.main-container .sidebar+.main-content .h-sidebar.sidebar-fixed {
        width: 774px
    }
    .container.main-container .sidebar.menu-min+.main-content .h-sidebar.sidebar-fixed {
        width: 921px
    }
}
 
@media (min-width:1200px) {
    .container.main-container .sidebar.compact+.main-content .h-sidebar.sidebar-fixed {
        width: 1059px
    }
    .container.main-container .main-content .h-sidebar.sidebar-fixed {
        width: 1164px
    }
    .container.main-container .sidebar+.main-content .h-sidebar.sidebar-fixed {
        width: 974px
    }
    .container.main-container .sidebar.menu-min+.main-content .h-sidebar.sidebar-fixed {
        width: 1121px
    }
}
 
@media only screen and (max-width:991px) {
    .main-container .main-content .sidebar.sidebar-fixed {
        z-index: 1026
    }
    .navbar-fixed-top+.main-container .main-content .sidebar {
        position: fixed;
        z-index: 1026
    }
}
.main-content-inner {
    float: left;
    width: 100%
}
.container-fluid{
    padding-left:0px;
    padding-right:0px
}
.container-fluid.map{
    display: block;
    height:100%;
 
}
#map{
    height: 100%;
    width: 100%;
}

[kevin254kl]

Je t'invite à mettre ton code sur https://codepen.io/ pour que l'on puisse voir le rendu et tester. Logiquement un min-width: 100% sur ton #map. J'en profite les br à la suite je déconseille utilise des margin avec une classe sur un élément

[bza88]

comment faire pour poster son code sur

Code :

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

https://codepen.io/pen

je ne connais pas cet outils ?

[bza88]

c'est fait.
voici mon projet. c'est basé sur bootstrap 3.3.6
https://codepen.io/bza88/post/template
mon probleme se situe au niveau de la hauteur de la map.