消除移动分辨率中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 */
}

Answer 2

不确定这是不是您的意思，但据我所知，您有一个带填充的容器，并且在容器内部有一个元素：

这个软填充类正在添加我认为你想要摆脱的填充。