Comment changer mon programme html ci dessous pour avoir un ajustement dynamique pour afficher correctement sidebar, navbar, card-header, card-body et fouter ? J’ulise Django et Leaflet. Le problème est que la carte n’apparait complètement dans la partie car-body et surtout la partie inferieure de la carte et le sidebar dépasse le footer.
<!DOCTYPE html>
{% load static %}
<html lang ="en">
{% load leaflet_tags %}
<head>
{% leaflet_js %}
{% leaflet_css %}
{% leaflet_js %}
{% leaflet_css %}
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="author" content=""><script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}"> </script>
<link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
<link rel="stylesheet" href="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css' %}">
<link rel="stylesheet" href="{% static '/css/leaflet.legend.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/Control.Geocoder.css' %}"/>
<script src="{% static '/js/jquery.min.js'%}"></script>
<script src="{% static '/js/popper.min.js'%}"></script>
<script src="{% static '/js/bootstrap.min.js'%}"></script>
<script src="{% static 'js/mousePosition.js' %}"></script>
<script src="{% static '/js/Control.Geocoder.js' %}"></script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.js' %}"> </script>
<script type="text/javascript" src="{% static 'dist/leaflet.ajax.min.js' %}"> </script>
<script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.min.js' %}"> </script>
<script type="text/javascript" src="{% static 'leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.js' %}"> </script>
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-info sidebar sidebar-dark accordion w-25 col-md-3" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="">
<div class="sidebar-brand-icon rotate-n-15">
</div>
<div class="sidebar-brand-text mx-3">Gestion</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="{% url 'all_map_today' %}">
<i class="fas fa-map"></i>
<span>Carte du jour</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsei" aria-expanded="true" aria-controls="collapsei">
<span>Gestion</span>
</a>
<div id="collapsei" class="collapse" aria-labelledby="headingi" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<a class="collapse-item" href="{% url 'saisie' %}">Saisie</a>
<a class="collapse-item" href="{% url 'update' %}">Mise a jour</a>
</div>
</div>
</li>
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">{{user}}</span>
<img class="img-profile rounded-circle" src="{% static '/img/undraw_profile.svg'%}">
</a>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<h1 class="h3 mb-2 text-gray-800">Cartographie</h1>
<!-- DataMap-->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-success" style="height: 5px;"><center>Carte du jour</center></h6>
</div>
<div id="map" class="card-body">
{% leaflet_map "map" callback="our_layers" %}
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
</div>
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto border">
<div class="copyright text-center my-auto font-weight-bold text-success">
<span>Copyright © 2024</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-info" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-info" href="{% url 'compte:logout' %}">Logout</a>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js'%}"></script>
<!-- Core plugin JavaScript-->
<script src="{% static '/vendor/jquery-easing/jquery.easing.min.js'%}"></script>
<!-- Custom scripts for all pages-->
<script src="{% static '/js/sb-admin-2.min.js'%}"></script>
<script type="text/javascript">
function our_layers(map,options){
var countryCoordinates = {
"type":"MultiPolygon",
"coordinates":[
[[[6.583262565814834,36.989813543660148],[6.599457227169353,36.973089910970657], ...
]};
var map = L.map('map', {
zoom: 5,
zoomSnap: 1, // Ajuster le zoomSnap
zoomDelta: 1,
minZoom: 3, // Zoom minimum
maxZoom: 19, // Zoom maximum
}).setView([[29.2638800, 0.2309800], 6);
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttribution = 'Map data © 2012 OpenStreetMap contributors';
var osm = L.tileLayer(osmUrl, {
attribution: osmAttribution
}).addTo(map);
var countryBoundary = L.geoJSON(countryCoordinates, {
style: {
"color": "#ff7800",
"weight": 2,
"opacity": 0.65
}
}).addTo(map);
</script>
<style type="text/css">
#map {
height: 1000px; /* Définissez une hauteur fixe appropriée pour votre carte */
}
.navbar {
height: 20px;
}
#sidebar {
bottom: 0;
width: 100%;
position: absolute;
max-height: 10vh; /* Limiter la hauteur du sidebar à la hauteur de la fenêtre */
}
/*.sidebar-menu.footer {
bottom: 10;
width: 100%;
position: absolute;
}*/
</style>
</body>
1