How to I fix a 100vh div to the screen?

Question

I'm trying to fix a google map within a div to screen. The map on the left side should be fixed while the content on the right sided should be scroll. Not sure how to achieve this as I am using position:fixed but it doesn't seem to do the trick See pictures.

Tried using the following but didn't work:

#map {
    margin-left: -15px;
    position: fixed;
    top: 0;
}


<div class="mapViewTitle">
    <h3>Searching:</h3>
    <div class="typeMap">
        <p>Single Family Homes</p>
    </div>
    <div class="priceMap">
        <p>From $200,000 to $300,000</p>
    </div>
    <div class="mapDetail">
        <p>3+ br</p>
    </div>
    <div class="mapDetail">
        <p>2+ bth</p>
    </div>
</div>
<div class="searchResultsMapRight">
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap1.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap2.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
    <div class="propertyOverview mapView">
        <img src="resources/img/samplePropertyMap3.png" alt=""
            class="propertyImage">
        <div class="quickDetails">
            <p>5689 Main Ave</p>
            <p>Los Angeles, CA 90019</p>
            <p class="priceDetail">$556,000</p>
        </div>
        <div class="quickFacts">
            <div class="quickFact1">2 br</div>
            <div class="quickFact2">2 bth</div>
            <div class="quickFact3">4,000 SF</div>
            <div class="like mapViewDetail"><i class="fa fa-thumbs-up"></i></div>
        </div>
    </div>
</div>
</div>
</div>
</section>

Fixed position but relative to container

Sandeep Ranjan · Answer 1 · 2017-12-21T08:34:57.293

1

Let's say that you have the screen divided into two parts one is fixed with the google map and another has the ability to scroll.

So you need to add

#map {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; 
}

This will cover the full half and Now you can adjust the position by changing the value of top, bottom, left, right.

If not you can see my work on google map here http://wherewheater.bitballoon.com/

edited Dec 21 '17 at 08:34

answered Dec 21 '17 at 08:23

Sandeep Ranjan

824
15
33

1

@Insivika use overflow-y: auto; – Sandeep Ranjan Dec 21 '17 at 10:21
1

You will have to add all the stuff in right side div – Sandeep Ranjan Dec 21 '17 at 10:24

score 0 · Answer 2 · answered Dec 21 '17 at 08:22

      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }

#map{
  height:100vh;
}

<div id="map"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBlzZ0CNZ-rHjNp_CI5VFc9QvvitzrOVjk&callback=initMap"></script>

100vh will not make the position fixed. – Sandeep Ranjan Dec 21 '17 at 08:24 — Sandeep Ranjan, Dec 21 '17 at 08:24

score 0 · Answer 3 · answered Dec 21 '17 at 08:24

0

try #map { position: fixed; top: 0; bottom: 0; } bottom: 0; will be fill your div.

answered Dec 21 '17 at 08:24

E.Batgerel

119
2
16

score 0 · Answer 4 · answered Dec 22 '17 at 00:07

You have used a lot of classes in your code. It may help to enclose them in div ids rather than sections ( I saw an end section tag but not a beginning?) In below snippet I have added 2 divs (with ids) separating the 2 code sections. I set the map at 90vh with a small margin - it's easier on the eye i find - but set to 100vh if you wish.

Hope this helps

#map {
  margin: 5px;
  position: fixed;
  top: 0;
  width: 45%;
  height: 100vh;
}

#match {
  width: 45%;
  height: auto;
  overflow-y: scroll;
  float: right;
}

<div id="map"> <!---enclosed iframe of map in div id-->
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d26446.690472440776!2d-118.35891963889674!3d34.04806981747934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2b8f9683c5e93%3A0xeaed7d9ab5bc2296!2sLos+Angeles%2C+CA+90019%2C+USA!5e0!3m2!1sen!2sie!4v1513898452752"
    width="100%" height="100%" ; frameborder="0" style="border:0" allowfullscreen></iframe></div>


<div id="match"> <!---inserted separate div id here--->
  <div class="mapViewTitle" data_liveedit_tagid="000000001A4CF100">
    <h3>Searching:</h3>

    <div class="typeMap">
      <p>Single Family Homes</p>
    </div>

    <div class="priceMap">
      <p>From $200,000 to $300,000</p>
    </div>

    <div class="mapDetail">
      <p>3+ br</p>
    </div>

    <div class="mapDetail">
      <p>2+ bth</p>
    </div>
  </div>


  <div class="searchResultsMapRight">
    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap1.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>

    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap2.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>

    <div class="propertyOverview mapView"><img alt="" class="propertyImage" src="resources/img/samplePropertyMap3.png">
      <div class="quickDetails">
        <p>5689 Main Ave</p>

        <p>Los Angeles, CA 90019</p>

        <p class="priceDetail">$556,000</p>
      </div>

      <div class="quickFacts">
        <div class="quickFact1">2 br</div>

        <div class="quickFact2">2 bth</div>

        <div class="quickFact3">4,000 SF</div>

        <div class="like mapViewDetail">&nbsp;</div>
      </div>
    </div>
  </div>
</div>

How to I fix a 100vh div to the screen?

4 Answers4