Question

我正在尝试将我的侧边栏与搜索结果放在我的谷歌地图旁边（我正在使用gmaps4rails）。我并排得到了它们，但问题是侧边栏没有延长地图的长度，请看图像SideBar with google Map.

以下是我视图中的代码

<div id="sideBar" class="pre-scrollable">
  <h2><%= @count%> results found </h2>
  <br>
 <% @maps.each do |map| %>
  <div>
    <div class="" id="map_<%= map.id %>">

    <h4>
      <%= link_to map.number, controller: "maps", action: "show", id: map.id%>
    </h4>


    <hr>

    </div>
  </div>
<% end %>

<%= link_to 'Return to Main Map', maps_path %>

</div> 
<div id="map_wrapper">
<div id="map" style='width: 100%; height: 100%;'></div>
 </div>

这是我在css中的代码：

#map_wrapper {
margin-left: 300px;
height: 800px;


}

#sideBar{
width: 300px;
height: 800px;
position: absolute;

 }

我的目标是并排和完全相同的长度。

Answer 1

我在代码中添加了我的评论。

工作响应示例：

＆＃13;

#map_wrapper {
  margin-left: 30%; /* should match sideBar width */
  overflow: hidden; /* cut off any overflow */
  height: 100%; /* fill up main div height */
}

#sideBar {
  width: 30%; /* adjust sidebar width as percentage of main div */
  max-height: 100%; /* Never exceed main div height on small screens */
  height: 400px;
  position: absolute;
  background: #131418;
}

#sideBar span {
  color: #999;
}

.main {
  max-width: 100vw; /* set max desired width for the ENTIRE set up */
  height: 400px; /* set max desired height for the ENTIRE set up */
  max-height: 100vh; /* make sure entire setup height never exceeds device height */
}

＆＃13;

<!-- initilize map -->
<script>
  function initMap() {var map = new google.maps.Map(document.getElementById('map'), {center: {lat: 40.674,lng: -73.945},zoom: 12,})}
</script>


<!--Your Map setup -->
<div class="main">

  <div id="sideBar" class="pre-scrollable">
    <span>Sidebar content goes here...</span>
  </div>


  <div id="map_wrapper">
    <div id="map" style='width: 100%; height: 100%;'></div>
  </div>

</div>



<!-- Load google API in the footer. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHu4QBgWONqtdOWVLTW5XZ51B1eOU6SWw&callback=initMap" async defer></script>

＆＃13;

Answer 2

如果你能发布页面的html会很有帮助。没有我可以说，当使用绝对定位的元素时，你应该指定top和left属性值 - 特殊性有助于调试这样的情况。此外，您应该知道它们的位置。他们的父容器是他们绝对定位的。

我注意到的另一件事是，你有一个

 class="pre-scrollable"

您的问题中没有记录这一点，因此我不确定这是否也会影响布局。

我很难将侧边栏放在我的谷歌地图旁边 - gmaps4rails

2 个答案: