Question

我是html和css的完全新手，我正在创建一个游戏，我想使用几个网格/列来显示一个地方和计时器，并且页面的其余部分将填充Map。我不知道如何实现它。如果我尝试像素它不会占据整个屏幕，我相信如果要在移动设备上完成它将是一个问题

这是我的代码

  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3" style="background-color:orange;">
      {{ countDownTimer }}
      </div>
      <div class="col-sm-9" style="background-color:pink;">
        {{ puzzle.name}} , {{ puzzle.country }}
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12" id="map" style="width:100%; height:100%;"></div>
    </div>
  </div>

Answer 1

以下是您要实现的目标的有效解决方案：http://jsfiddle.net/4mtyu/2758/

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3" style="background-color:orange;">
      {{ countDownTimer }}
    </div>
    <div class="col-sm-9" style="background-color:pink;">
      {{ puzzle.name}} , {{ puzzle.country }}
    </div>
  </div>
</div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map_div"></div>

CSS：

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

#map_div {
  position: relative;
}

h1,
p {
  margin: 0;
  padding: 0;
}

更多信息：

无法放置覆盖页面的谷歌地图

1 个答案: