javascript - 消除移动分辨率中 div 之间的空白

Question

我正在创建移动和网络分辨率的页面，我遇到的问题是在移动分辨率中我有一些空白空间应该由为此分辨率保留的内容填充。

var map;
$(document).ready(function(){
  map = L.map( 'map', {
  center: [33.960057, -6.916462],
  minZoom: 2,
 zoom: 14,
  zoomControl: true
  });
  L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 20,
    subdomains:['mt0','mt1','mt2','mt3']
  }).addTo( map );
function checkWidth() {
    if ($(window).width() < 800) {
        $('#map').removeClass('soft-padding');
        $('.col-sm-9').addClass('map-padding map-container-mobile');
    } else {
          $('#map').addClass('soft-padding');
          $('.col-sm-9').removeClass('map-padding map-container-mobile');
    }
}

$(window).resize(checkWidth);
/*(function() {

    $(window).resize(function() {
      console.log($(this).width());
      if($(this).width() >1100){

        if($('#map').hasClass('soft-padding')){
          $('#map').removeClass('soft-padding');
        }
        if(!$('.col-sm-9').hasClass('map-padding map-container-mobile')){
          $('.col-sm-9').addClass('map-padding map-container-mobile');
        }

      } else {
        console.log("hhh");
        if(!$('#map').hasClass('soft-padding')){
          $('#map').addClass('soft-padding');
        }
        if($('.col-sm-9').hasClass('map-padding map-container-mobile')){
          $('.col-sm-9').removeClass('map-padding map-container-mobile');
        }
      }
    })
  })()*/


  $('#open-mod').click(function () {
             $('#myModal').modal('show');
         });
  /* Add a basic data series with six labels and values */
  new Chartist.Line('.ct-chart', {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
    series: [
      [3, 2, 1, 0.5, 1, 0, -1, -3, 2, 0.8, -2, -1, 3, 2, -0.02, 0.3]
    ]
  }, {
    high: 3,
    low: -3,
    fullWidth: true,
    // As this is axis specific we need to tell Chartist to use whole numbers only on the concerned axis
    axisY: {
      onlyInteger: true,
      offset: 20
    }
  });
  });

.hide-overflow{
  overflow:hidden;
}
.container, html, body{
  width: 100% !important;
  height: 100% !important;
  padding:0;
  position: relative;
}
#container{
  min-height: 100%;
  display : table;
}
#container>div{
  display: table-row;
  height: 0;
}
/*Herder Section*/
  #header-row{
    display: table-row;
  }
  #header-row .navbar{
    margin : 0;
    background: rgb(89,167,27);
    border:none;
  }
  #header-row .navbar a{
    color: white;
  }
  #header-row .navbar button{
    color: white;
  }
  .navbar-brand{
    font-size: 2em;
  }
  /*Section of "Zone géographique"*/
  #zone-geog{
    padding: 0px;
    white-space: nowrap;
    color : white;
    display: table-row;
  }
  #menu-geog{
    height : 100%;
  }
  #menu-geog .row {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top : 5px;
  }
  #zone-geog .container{
      background: rgb(6,117,179);
      border-radius: 10px;
      white-space: nowrap;
  }
  #zone-geog-text{
    margin-top: 3px;
    padding-left: 30px;
    font-family: 'Roboto Light';
  }
  #zone-geog .col-xs-12{
    height: 100%;
    padding: 0px;
    white-space: nowrap;
  }
  #zone-geog select option{
    font-family: 'Roboto Light';
    font-size:  1em;
    color : rgb(245,245,245);
  }
  /*Data viewer section*/
  #data-viewer{
    height: auto;
    display: table-row;
  }
  #indica{
    height: 30%;

  }
  #print-contact{
    padding-left: 30px;
    padding-right: 5px;
  }
  #print-contact-mobile{
    left: 11.95%;
  }
  #print-contact-mobile{
    padding-left: 0px;
    padding-top: 10px;
  }
  #indica .container{
    background: rgb(6,117,179);
    border-radius: 10px;
  }
  #indica .row .col-xs-9 {
    margin-top: 10px;
  }
  #indica .row .col-xs-3 {
    margin-top: 10px;
  }
  #indica p{
    padding-left: 10px;
    font-family: 'Roboto Light';
    color: white;
  }
  #evolu{
    min-height: 70%;
    display:table;
    border-radius:10px;
  }
  #evolu .container{
    background: rgb(6,117,179);
    border-radius: 10px;
    display:table-cell;
  }
  #evolu .container .row .col-xs-9{
    margin-top: 10px;
  }
  #evolu .container .row .col-xs-3{
    margin-top: 10px;
  }
  #evolu p{
    font-family: 'Roboto Light';
    color: white;
  }
  #map{
    height : 100%;
    border-radius: 10px;
    position: relative;
    z-index: 500

  }
  #data-viewer .col-sm-9{
    padding: 0px;
  }
  #img-width-user{
    width: 20px;
  }
  #img-expand{
    width:17px;
    float: right;
    margin-top: 5px;
    margin-right: 10px;
  }
  #img-cmnt{
    width:17px;
    float: right;
    margin-top: 5px;
    margin-right: 10px;
  }
  .modal-border{
    border:none;
  }
  .modal{
    top:25%;
  }
  .modal-backdrop {
    background-color: white;
  }
  .modal-dialog{
    width:450px;
  }
  #open-mod{

  }
  .modal-header h5{
    font-size: 2em;
  }
  .modal-footer p{
    font-size: 2em;
  }
  .modal-button{
    width: 100%;
  }
  /*padding, margin, chart and some elements  properties*/
  .ct-chart-line{
    background: white;
    border-radius: 10px;
  }
  .ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: #337ab7;
  }
  .margin-zero{
    margin :0px;
  }
  .soft-padding{
    padding: 10px;
    border-radius: 10px;
  }
  .padding-zero{
    padding: 0px;
  }
  #select-start-padding{
    padding-right : 2px;
    padding-left : 0px;
  }
  #soft-padding-select-indica1{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
  }
  #soft-padding-select-indica2{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
  }
  #soft-padding-select-evolu1{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 10px;
  }
  #soft-padding-select-evolu2{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
  }
  #soft-padding-select-evolu1 p{
    font-size: 0.7em;
  }
  .padding-text{
    padding-left: 10px;
  }
  .select-prop{
    padding-left: 10px;
    padding-right: 10px;
    -webkit-box-flex: 2;
        -ms-flex-positive: 2;
            flex-grow: 2;
  }
  .select-prop select{
    background-position-x: 200px;
    background-position-y: 8px;
    background-color: white;
  }
  .row-select{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #background-textarea{
    background: rgb(245,245,245);
    border:none;
  }
  .padding-modal{
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left:15px;
    padding-left: 15px;
  }
  /* Roboto font familly*/
  .roboto-light{
    font-family: 'Roboto Light';
  }
  /*font awsome property*/
  .fa-comments-o{
    margin-right: 5px;
  }
  /* Classes to align vertically and horizontally*/
  .vertical-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
  }
  .align-horizontally{
    display: flex;
    flex-direction: row;
  }
  /*mobile section*/
  #mobile-section{
    padding: 0px;
  }
  #mobile-section .col-xs-12{
  position: fixed;
  bottom : 0;
  padding : 0px;
  }
  .map-container-mobile{
    height : 100%;
    position : absolute;
  }
  /*Footer section*/
  #footer-row{
    background-color:rgb(66, 66, 66);
    padding: 0;
    text-align: center;
    font-size: 0.9em;
    color: white;
    bottom: 0;
    z-index: 999;
    display: table-row;
  }
  #footer-row p{
    margin : 0px;
    vertical-align: middle;
    height : 100%;
  }

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Hind+Siliguri" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
    integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
    crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"
    integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg=="
    crossorigin=""></script>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <!--<link rel="stylesheet" href="style.css">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <link rel="stylesheet" href="index.css">
  </head>
<body>
  <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header padding-modal modal-border">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h5 class=" roboto-light modal-title " id="exampleModalLabel">Commentaire</h5>
          </div>
          <div class="modal-body padding-moda modal-borderl">
            <textarea  id="background-textarea" class="form-control roboto-light" rows="5" id="comment" placeholder="Votre commentaire ici"></textarea>
          </div>
          <div class="modal-footer padding-modal modal-border">
            <div class="col-xs-12 margin-zero padding-zero">
              <button type="button" class="btn btn-primary modal-button roboto-light margin-zero padding-zero"><p class="margin-zero">Envoyer</p></button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="container" class="container ">
      <div id="header-row" class="row margin-zero hidden-xs">
        <nav class="navbar navbar-inverse  sidebar " role="navigation">
          <div class="container-fluid">
            <div class="navbar-header">
              <a class="navbar-brand hidden-xs" href="#">IRRISAT</a>
            </div>
            <ul class="nav navbar-nav navbar-right ">
              <li class="hidden-xs navbar-form">
                <div class="center-block select-prop margin-zero">
                  <select class="form-control">
                    <option>Campagne en cours</option>
                  </select>
                </div>
              </li>
              <li class="hidden-xs"><button class="btn btn-link navbar-btn" onclick="openNav()">Compte(Agriculteur)</button></li>
              <li class="hidden-xs"><a href="#" ><i class="fa fa-user-circle-o" aria-hidden="true"></i> </a></li>
            </ul>
          </div>
        </nav>
      </div>
      <div id="zone-geog" class="row margin-zero hidden-xs">
        <div class="col-xs-12 margin-zero">
          <div id="menu-geog" class="row  soft-padding  margin-zero">
            <div class="container border-solid-black" >
              <p id="zone-geog-text">Zone Géographique</p>
              <div class="row margin-zero padding-zero row-select">
                  <div class="col-xs-2   center-block select-prop margin-zero">
                    <select class="form-control">
                      <option>BASSIN 1</option>
                    </select>
                  </div>
                  <div class="col-xs-2   center-block select-prop margin-zero">
                    <select class="form-control">
                      <option>PERIMETRE 1</option>
                    </select>
                  </div>
                  <div class="col-xs-2   center-block select-prop margin-zero">
                    <select class="form-control">
                      <option>SECTEUR 1</option>
                    </select>
                  </div>
                  <div class="col-xs-2  center-block select-prop margin-zero">
                    <select class="form-control">
                      <option>BLOC 1</option>
                    </select>
                  </div>
                  <div class="col-xs-2  center-block select-prop margin-zero"style="display:inline-flex;">
                    <select class="form-control">
                      <option>PARCELLE 3</option>
                    </select>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="data-viewer" class="row margin-zero">
        <div class="col-xs-12 col-sm-9 col-sm-push-3 col-lg-push-0 col-md-push-0 margin-zero padding-zero">
          <div class="row  soft-padding  margin-zero" >
            <div class="container border-solid-black">
              <div class="row padding-zero margin-zero">
                <div id="map" class="col-xs-12 padding-zero margin-zero">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="indica-evolu" class="col-xs-12 col-sm-3 col-sm-pull-9 col-lg-pull-0 col-md-pull-0 padding-zero margin-zero">
          <div id="indica" class="row margin-zero soft-padding">
            <div class="container border-solid-black">
              <div class="row margin-zero padding-zero">
                <div class="col-xs-9 margin-zero padding-zero">
                  <p class="margin-zero">Indicateur</p>
                </div>
                <div id="print-contact" class="col-xs-3 clearfix text-right align-horizontally">
                  <i id="open-mod" class="fa fa-comments-o fa-inverse" aria-hidden="true"></i>
                  <i class="fa fa-print fa-inverse" aria-hidden="true"></i>
                </div>
              </div>
              <div id="soft-padding-select-indica1" class="row margin-zero">
                  <select class="form-control">
                    <option>Prod</option>
                  </select>
              </div>
              <div id="soft-padding-select-indica2" class="row margin-zero ">
                  <select class="form-control">
                    <option>27/04/2017</option>
                  </select>
              </div>
            </div>
          </div>
          <div id="evolu" class="row margin-zero soft-padding hidden-xs hidden-sm">
            <div class="container border-solid-black">
              <div  class="row margin-zero padding-zero">
                <div class="col-xs-9 margin-zero padding-zero">
                  <p class="margin-zero padding-text">Evolution</p>
                </div>
                <div class="col-xs-3 text-right">
                  <i class="fa fa-expand fa-inverse" aria-hidden="true"></i>
                </div>
              </div>
              <div id="soft-padding-select-evolu1" class="row margin-zero soft-padding">
                <div class="col-xs-6 margin-zero padding-zero">
                  <p class="margin-zero padding-zero">Début</p>
                </div>
                <div class="col-xs-6 margin-zero padding-zero">
                  <p class="margin-zero padding-zero">Fin</p>
                </div>
              </div>
              <div id="soft-padding-select-evolu2" class="row margin-zero soft-padding">
                <div id="select-start-padding" class="col-xs-6">
                  <select class="form-control">
                    <option>29/04/2015</option>
                  </select>
                </div>
                <div class="col-xs-6 padding-zero">
                  <select class="form-control">
                    <option>27/04/2017</option>
                  </select>
                </div>
              </div>
              <div   class=" row margin-zero soft-padding margin-zero">
                <div  class=" ct-chart col-xs-12 margin-zero padding-zero">
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>
      <div id="footer-row" class="row margin-zero hidden-xs vertical-center">
        <div class="col-xs-12">
                2017 - Tous droits réservés
        </div>
      </div>
      </div>
    </div>
  </body>
  <script type="text/javascript">
    function setMapHeight(){
      var FooterHeight = $("#footer-row").outerHeight();
      /*var indicaHeight = $("#indica").outerHeight();
      var evoluHeight = $("#evolu").outerHeight();

      /*alert(indicaHeight);
      alert(evoluHeight);*/
      if($("#header-row").is(":visible")){
        var HeaderHeight = $("#header-row").outerHeight();
      }else{
        var HeaderHeight = 0;
      }
      if($("#header-row").is(":visible")){
        var FooterHeight = $("#footer-row").outerHeight();
      }else{
        var FooterHeight = 0;
      }
      if($("#menu-geog").is(":visible")){
        var MenuGeogHeight = $("#menu-geog").outerHeight();
      }else{
        var MenuGeogHeight = 0;
      }
      if($("#data-viewer").is(":visible")){
        var dataViewerHeight = $("#data-viewer .padding-zero > div").outerHeight();
      }else{
        var dataViewerHeight = 0;
      }


      mapHeight = $(document).outerHeight() - HeaderHeight - MenuGeogHeight - FooterHeight - dataViewerHeight;
      $("#map").height(mapHeight);
    }
    setMapHeight();
    $(window).on("resize", setMapHeight);
  </script>
</html>

如果您对如何删除这些空白空间有任何想法，请告诉我。之前感谢

Answer 1

最好的方法是像这样使用 css 媒体查询:

例如……

@media screen and (max-width: 699px) and (min-width: 520px) {
    .className, div, etc {
        padding-left: 30px;
        margin: 0;
    }
}

您可以使用任何 css 宽度、方向(垂直、水平)、像素密度来定位您的设备。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}