谷歌地图未显示在右对齐的 div 中

Question

在我的 html 代码中，我有两个 div，我想在我的右对齐 65% div 中显示我的地图。我尝试将每个地图的父级高度设置为 100%，并且还遵循文档中的样式，然后我也无法显示地图任何帮助将不胜感激。谢谢

jsfiddle 链接：https://jsfiddle.net/1w5u3t8y/

.row {
  height: 100%;
}

.column {
  float: left;
  height: 100%;
}

.left {
  width: 35%;
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-right: 20px;
}

.right {
  background-color: grey;
  width: 65%;
}

.card {
  width: 450px;
  height: 180px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  margin: 1.5rem;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#map {
  height: 100%;
  position: absolute;
}

<div class="row" style="height:100%;">
  <div class="column left" />
  <div class="column right" style="height:100%;">
    <div class="card" id="mapwrapper" style="height:100%;">
      <div class="card-header">
        Add your Location
        <!-- <a href="#" class="btn btn-info float-right ml-3" onclick="submitloc()">Save My Location</a> -->
        <input type="text" class="form-control float-right" style="width:300px;" id="location-text-box" placeholder="Enter place to search">
      </div>
      <div id="map" style="height:100%; width:65%"></div>
    </div>
  </div>
</div>

Answer 1

我在下面更新了您的 HTML 和 CSS。我已经实现了 Flexbox，它有助于解决您的布局问题。我们还需要查看您的 Google 地图 JavaScript 才能进行测试。

HTML

<div class="row">
    <div class="column left">
    </div>
    <div class="column right">
        <div class="card" id="mapwrapper">
            <div class="card-header">
                Add your Location
                <!-- <a href="#" class="btn btn-info float-right ml-3" onclick="submitloc()">Save My Location</a> -->
                <input type="text" class="form-control float-right" style="width:300px;" id="location-text-box" placeholder="Enter place to search">
            </div>
            <div id="map"></div>
        </div>
    </div>
</div>

CSS

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.row {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    height: 100%;
}

.left {
    flex: 1 1 35%;
    padding-right: 20px;
    background-color: #2193b0;
    background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
    background: linear-gradient(to right, #6dd5ed, #2193b0);
}

.right {
    flex: 1 1 65%;
    background-color: grey;
 }

.card {
    width: 450px;
    height: 180px;
    margin: 1.5rem;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    background: linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
}

#map {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: red;
}

Codepen example

Answer 2

我认为这更接近你想要的？如果我理解正确的话，我必须在你的 div#map 周围移动才能找到正确的位置（用于绘画顺序，并添加背景以提高可见度）。

不排队的原因，是其他边界因素的原因，所以我：

• 为您的 CSS 添加了 box-sizing 属性
• 将position:relative 移至您的div.column
• 移动了“位置：absolutefromdiv#mapto yourdiv.card`”
• 在div.card 中添加了top 和bottom 锚点，以模拟height: 100% 而不会溢出。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.column {
  float: left;
  height: 100%;
  position: relative;               /* Added */
  box-sizing: border-box;           /* Added */
}

.left {
  width: 35%;
  background: #2193b0;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #6dd5ed, #2193b0);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  padding-right: 20px;
}

.right {
  background-color: grey;
  width: 65%;
}

.card {
  position: absolute;             /* Added */
  width: 450px;
  background-color: #fff;
  background: linear-gradient(#f8f8f8, #fff);
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
  overflow: hidden;
  margin: 1.5rem;
  bottom: 0;                     /* Added */
  top: 0;                        /* Added */
}

#map {
  height: 100%;
  /*position: absolute;          /* Removed */
  background-color: pink;        /* Added */
}

<div class="row" style="height:100%;">
  <div class="column left"></div>
  <div class="column right">
    <div id="map"></div>
    <div class="card" id="mapwrapper">
      <div class="card-header">
        Add your Location
        <!-- <a href="#" class="btn btn-info float-right ml-3" onclick="submitloc()">Save My Location</a> -->
        <input type="text" class="form-control float-right" style="width:300px;" id="location-text-box" placeholder="Enter place to search">
      </div>
    </div>
  </div>
</div>