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:
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 ?
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 & 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> 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 & 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">×</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 ?