我很难将边栏放在 google 地图旁边 - gmaps4rails

Question

我试图将带有搜索结果的边栏放在我的 google 地图旁边（我正在使用 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

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

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

 class="pre-scrollable"

这在您的问题中没有记录，所以我不确定这是否也会影响布局。

Answer 2

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

工作响应示例：

#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 */
}

<!-- 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>

我很难将边栏放在 google 地图旁边 - gmaps4rails

I am having a difficult time putting my sidebar next to my google maps - gmaps4rails

html

css

ruby-on-rails

css-float

gmaps4rails