在媒体查询中使用 Flex 时 Div 消失

问题描述 投票：0回答：1

我在 div 中有一张传单地图。但是，在移动设备上，地图未显示。我尝试过使用 

flex
但不起作用。

知道如何解决这个问题吗？

    var map = L.map('map').setView([45.505, -73.19], 9); // Set initial coordinates and zoom level
    L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
* {
    box-sizing: border-box;
  }

  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

#table-container {
    height:350px;
    overflow:auto;  
    margin-top:20px;
    margin-bottom: 20px;
}

h5, h4, h2{
    font-weight: bolder;
    text-align: center;
  }

.map {
    flex: 100% 1 0;
    height: calc(100vh - 255px);
    box-sizing: border-box;
  }

.table-header{
    font-size: x-small;
    text-align: center;
}

p{
    color: gray;
    font-size: small;
    text-align: center;
}

.data-rental{
    text-align: center;
    font-size: 60px;
}

.logo {
    width: 200px;
    height: 49px;
}

@media only screen and (min-width: 1800px) {
    html, body {
        min-height: 100vh; 
        width: 100%;
        overflow: auto;
    }

    .main-data{
        text-align: center;
    }

    * {
        box-sizing: border-box;
        font-family: 'Lucida Sans';
    }
        
    .row::after {
        content: "";
        clear: both;
        display: block;
    }
        
    [class*="col-"] {
        float: left;
        padding: 15px;
    }

    h5, h4, h2{
        font-weight: bolder;
        text-align: left;
    }
         
        /* For desktop: */
    .col-1 {width: 10%; align-items:normal;}
    .col-2 {width: 16.66%; align-items:normal;}
    .col-3 {width: 25%; align-items:normal;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 65%; display: block;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%; align-items:normal;}

    .column {
        text-align:center;
        background-color: white; /* Change the background color as needed */
        color: black; /* Change the text color as needed */
        float: left;
        padding-top: 20px;
        vertical-align: center;
    }
      
      
    .table-header{
        font-size: x-small;
        text-align: center;
    }
      
    .table-container {
        height:300px;
        overflow:auto;  
        margin-top:20px;
        margin-bottom: 20px;
    }
    
      
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }

    .logo {
        width: 200px;
        height: 49px;
    }
        
    .left-sidebar {
          position: absolute;
          padding: 10px;
          bottom: 0;
          left:0;
          background-color: white; /* Change the background color as needed */
          color: black; /* Change the text color as needed */
          height: calc(100vh - 200px);
    }
        
    .right-sidebar {
          position: absolute;
          display:block;
          right: 0;
          background-color: white; /* Change the background color as needed */
          color: black; /* Change the text color as needed */
          height: calc(100vh - 160px);
          overflow-y: scroll;
    }

    .div-selectors{
        padding-bottom: 5px;
        float: left;
    }
          
    .selectors{
        width:100%;
        float: left;
    }
    
    .data-rental{
        text-align: right;
        font-size: 60px;
        float: right; /* add this */
    }
    
    #wrapper {
        overflow: hidden; /* add this to contain floated children */
        padding: 10px;
    }
    
    #data-desc {
        width: 66%;
        text-align: justify;
        float:left; /* add this */
    }
    
    .data-container{
        padding: 20px;
    }
    
    #data-header{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    
    p{
        color: gray;
        font-size: small;
        text-align: left;
    }

    .map {
        flex: 1;
        height: calc(100vh - 260px);
        margin-bottom: -15px;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website Title</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.css">
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
  <link rel="stylesheet" href="leaflet-groupedlayercontrol/leaflet.groupedlayercontrol.css">
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.css">
  <link rel="stylesheet" href="leaflet/dist/MarkerCluster.Default.css">
  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.5/typeahead.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
  <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/L.Control.Locate.min.js"></script>
  <script src="leaflet/dist/leaflet.markercluster-src.js"></script>
  <script src="leaflet/dist/leaflet.markercluster.js"></script>
  <link rel="stylesheet" href="css/mobile-app.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js"></script>
</head>

<body>
  <div class="col-12">
    <header>
      <div>
        <h5 style="font-weight: bold;">Title</h5>
      </div>
    </header>
  </div>
  <div class="col-1">
    <div class="left-sidebar col-1">
      <div>
        <h5>Filter</h5>
      </div>
      <div class="div-selectors">
        <h5>Region</h5>
        <form action="" method="POST" enctype="multipart/form-data">
          <select id="reg" class="selectors" type="hidden" style="width:150px">
            <option></option>
          </select>
        </form>
      </div>
      <div class="div-selectors">
        <h5>Metro</h5>
        <form action="" method="POST" enctype="multipart/form-data">
          <select id="rmr" class="selectors" type="hidden" style="width:150px">
            <option></option>
          </select>
        </form>
      </div>
      <div class="div-selectors">
        <h5>City</h5>
        <form action="" method="POST" enctype="multipart/form-data">
          <select id="muni" class="selectors" type="hidden" style="width:150px">
            <option></option>
          </select>
        </form>
      </div>
  </div>
  </div>
  <div class="col-8 main-container">
    <div class="container-fluid main-data">
      <div class="col-3 column">
        <h3 id="tot">·</h3>
        <h5 class="main-data">1</h5>
      </div>
      <div class="col-3 column">
        <h3 id="str">·</h3>
        <h5 class="main-data">2</h5>
      </div>
      <div class="col-3 column">
        <h3 id="ltr">·</h3>
        <h5 class="main-data">3</h5>
      </div>
      <div class="col-3 column">
        <h3 id="pcltr">·</h3>
        <h5 class="main-data">4</h5>
      </div>
    </div>
    <div class="map" id="map"></div>
  </div>
  <div class="col-3">
    <div class="right-sidebar col-3">
      <!-- Right sidebar content goes here -->
      <div id="data-header">
        <h5>More infos</h5>
        <h2 id="geo-viz"></h2>
      </div>
      <div></div>
      <h5>Table</h5>
      <div class="table-container">
        <table class="table">
          <thead>
            <tr>
              <th scope="column" class="table-header">1</th>
              <th scope="column" class="table-header">2</th>
              <th scope="column" class="table-header">3</th>
              <th scope="column" class="table-header">4</th>
            </tr>
          </thead>
          <tbody id="data-table">
          </tbody>
        </table>
      </div>
      <div id="data-header">
        <h5>Data title 1</h5>
        <div id="wrapper">
          <div id="data-desc">
            <p></p>
          </div>
          <div class="data-rental"></div>
        </div>
      </div>
      <div id="data-header">
        <h5>Data title 2</h5>
        <div id="wrapper">
          <div id="data-desc">
            <p></p>
          </div>
          <div class="data-rental"></div>
        </div>
      </div>
    </div>
  </div>

html css flexbox
1个回答
0
投票

您正在使用 

flex
在列中显示地图。默认情况下，
flex
将项目缩小到其内容流的最小尺寸。由于 Leaflet 地图显示为 
position: absolute
，因此没有内容流动，因此包装元素会缩小为宽度和高度为 0。

您需要设置地图的尺寸。您可以将宽度设置为 100%，这会将其扩展到其父级的宽度。然而高度不能是百分比，因为它仍然会缩小到 0px。您需要将其设置为固定大小（例如 200px），或者它可以是视口高度的百分比（例如 80vh）。

由于您使用的是 

flex
，因此您也无法使用 
height
来设置高度。您必须使用 
flex-bases
，或者也许 
min-height
。

更改 CSS 中的 

.map
规则并删除 
flex
和 
height
。

.map {
    width: 100%;
    flex-basis: 200px;
}

您还将高度设置为 

calc( 100vh - 255px )
。在某些视口高度仅略大于 255 像素的屏幕上，这可能会出现问题。更可靠的解决方案可能是设置地图的最小高度。例如，要将最小高度设置为 200px，您可以这样做：

    flex-basis: calc( max( 200px, calc( 100vh - 255px ) ) )
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.