How can I make a 100vh div stick to the screen?

Question

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for reference.

I attempted the following code without success:

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

https://i.stack.imgur.com/we4Zf.jpg

Fixed position but relative to container

html css

Answer 1

Answer №1

Imagine splitting your screen in half, where one side displays a fixed Google map and the other side is scrollable.

To achieve this, you will need to add the following CSS code:

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

This code will cover half of the screen, and you can customize its position by adjusting the values of top, bottom, left, right.

If you want to see an example of my work with Google maps, you can visit

Answer 2

Imagine splitting your screen in half, where one side displays a fixed Google map and the other side is scrollable.

To achieve this, you will need to add the following CSS code:

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

This code will cover half of the screen, and you can customize its position by adjusting the values of top, bottom, left, right.

If you want to see an example of my work with Google maps, you can visit

Answer 3

Answer №2

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

#display-map{
  height:100vh;
}

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

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

Answer 4

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

#display-map{
  height:100vh;
}

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

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

Answer 5

Answer №3

Experiment with adding the following CSS code to your #map element:

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

This will ensure that the div fills up the entire space vertically.

Answer 6

Experiment with adding the following CSS code to your #map element:

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

This will ensure that the div fills up the entire space vertically.

Answer 7

Answer №4

In order to improve the organization of your code, consider enclosing the classes within div ids instead of sections. I noticed an end section tag but could not find a beginning one.

Here is a modified snippet where I have introduced 2 divs with unique ids to separate the two code sections. The map has been set at 90vh with a slight margin for better readability - but you can change it to 100vh if desired.

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

Answer 8

In order to improve the organization of your code, consider enclosing the classes within div ids instead of sections. I noticed an end section tag but could not find a beginning one.

Here is a modified snippet where I have introduced 2 divs with unique ids to separate the two code sections. The map has been set at 90vh with a slight margin for better readability - but you can change it to 100vh if desired.

#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 can I make a 100vh div stick to the screen?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Remove Chosen Pictures (Checkbox/PHP/MySQL)

Is it possible to evaluate the complexity of automating the user interface of a web application?

Utilizing the Jquery hover feature to reveal or conceal an element

I'm wondering if anyone has any insights as to why the CSS rule `body{ overflow: auto;}` is not functioning properly for me. Despite my attempts of adding a class to the body tag and

Error encountered while trying to upload a file using PHP on a hosting platform

Navigating Parent Menus While Submenus are Expanded in React Using Material-UI

Include dropdown lists for selecting the year, month, and day on a web page

Is there a way to eliminate the black seam that is visible on my floor mesh that has been separated? I am utilizing A

A step-by-step guide to implementing Inline Linear Gradient in Nuxt/Vue

Create a function that adds a new div element with a one-of-a-kind identification when

Finding the height of concealed content within a div using the overflow:hidden setup

Using jQuery to reference my custom attribute---"How to Use jQuery to reference My

javascript: window.open()

AngularJS Treeview with Vertical Line Styling using CSS

Do you think it's achievable to modify the color using CSS's order attribute?

Angular is not properly integrating Bootstrap features

Utilizing inline styles with the asset pipeline feature in Rails

Guide to automating the versioning of static assets (css, js, images) in a Java-based web application

Tips for dynamically incorporating input forms within AngularJS

Ways to stop the thead from appearing on every page in a printout