私はサイドバーを自分の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

コードに自分のコメントを追加しました。

操作応答の例は：

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

Answer 2

ページのhtmlを投稿できると便利です。それがなければ、絶対配置された要素を使用するときは、上部および左の属性値を指定する必要があります。特異性は、このような状況をデバッグするのに役立ちます。さらに、彼らは彼らが何の中に位置しているか知っている必要があります。彼らの親コンテナは、絶対に配置されているものです。

私が気づいたもう一つ

は、あなたはこれがあなたの質問に記載されていない

class="pre-scrollable" 

を持っているので、私は、これはまた、レイアウトに影響を与えているかはわかりません。