1448 sujets

Web Mobile et responsive web design

salut, j'ai une div et je voudrais qu'elle s'adapte a tout type d’écran en hauteur. pour le moment j'ai mis une valeur fixe de 540px qui convient parfaitement a mon écran mais cette valeur ne convient pas a d'autre écran. quand je mets height a 100%, je suis obligé de mettre la div en position fixed pour que la carte de géolocalisation contenu dans la div soit visible.
voici une portion de mon:
<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 breadcrumbs-fixed 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 -->
                        [b]<div class="container-fluid map">
                            <div id="map" class=""></div>

                        </div>[/b] 


                        <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 -->


@import url('http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css');
.main-content,
body,
html {
    min-height:100%;
}
html {
    position: relative;
}

body {
    padding-bottom:0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #393939;
    line-height: 1;
    overflow: hidden;
    background-image: url('../../../images/background/bg2.jpg');
}
.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%
    }
}
.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;
    /*    padding: 8px 20px 24px*/
}
.container-fluid{
    padding-left:0px;
    padding-right:0px
}
.container-fluid.map{
    width: 100%;
    height: 540px;
}
#map{
    height: 100%;
    width: 100%;
}

comment gérer le height de .container-fluid.map pour que la carte s'adapte en hauteur a tout type d’écran sans débordement ?
sa ne marchait pas chez moi, j'ai dû procéder ainsi et maintenant sa marche sur les ecrans.
#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 microsoft*/
    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 microsoft*/
    height: calc(100% - 85px); /* */  
}