谷歌地图未以右对齐的 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 Maps 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;
}

代码笔示例

Answer 2

我认为这更接近您想要的？如果我理解正确的话，我不得不在你的div#map周围打乱才能在正确的位置(为了绘画顺序，并为可见性添加背景(。

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

• 向 CSS 添加了box-sizing属性
• 已将position:relative移至div.column
• 移动了"位置：绝对fromdiv#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>