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

htmlcss

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to displaying API data in HTML format

This university assignment involves working on a homework project where I need to utilize a public API in HTML. So far, I have successfully called the public API to display a list of radio channels in the left menu (without adding any click functionality). ...

javascripthtmlarraysjsonajax

Text placed over a video player

I have created a full-screen div with a video playing in the background and I need to overlay some HTML on top of it. However, when I add the HTML elements, they briefly appear and then disappear once the video starts playing. What could be causing this i ...

htmlbootstrap-4html5-video

Display a variety of body background images depending on the user's selection

Is it possible to change the background of the page when an option is selected from a dropdown menu? Additionally, can this be achieved with a smooth fade in and fade out animation? Here is a code example on CodePen. body ...

jqueryhtmlcss

Issue with unordered list in the footer overlapping other elements

I've been struggling to resolve an issue with my footer for quite some time now. The problem seems to be arising from my unordered list being set to float right, causing it to overflow the parent div. Could someone please shed light on what I might b ...

csslistfooteroverlappingunordered

Having difficulties redirecting with the button's onclick function

I'm struggling to redirect users to another page using a button (assuming the hostname is localhost:8000) $('#getFruit').attr('onclick', window.location.host + '/getFruit/banana') <script src="https://cdnjs.cloudfl ...

javascripthtml

I attempted to update the text on an HTML page using the content of "conetnt", however, it was unsuccessful

.custom-div { outline: none !important; width: 450px; margin: auto; background-color: #ccc !important; text-indent: -9999px;} .custom-div::before{content: 'sample';color: black;} ...

htmlcss

Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the ...

htmlcssangulargoogle-visualization

Add CSS styling to input text that is not empty

Is it possible to achieve this using CSS3 alone? var inputs = document.getElementsByTagName("INPUT"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].type == "text") { if (inputs[i].value != "") { inputs[i].s ...

css

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

javascripthtml

Issue encountered when integrating AJAX with PHP and HTML5 form

I've been working on solving a puzzle involving a contact form that uses AJAX and PHP. I decided to try reverse engineering the PHP code from this page (). However, when testing it out, the message gets stuck at "sending message...." after clicking "S ...

phpajaxhtmlcontact-form

Navigate to the editing page with Thymeleaf in the spring framework, where the model attribute is passed

My goal is to redirect the request to the edit page if the server response status is failed. The updated code below provides more clarity with changed variable names and IDs for security reasons. Controller: @Controller @RequestMapping("abc") public clas ...

javascriptjqueryhtmlspring-bootthymeleaf

Issue with SVG mask not functioning when transform is applied

I am struggling to apply a mask to a transformed SVG element. When I try to do this with a path, the structure is the same. If I apply the mask to an element outside of the transformed group, it works as expected. However, if I try to do the same inside, t ...

csssvgmask

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

Retrieve all items on the webpage using the pattern "_ followed by 10 random characters" through JavaScript

On my webpage, there is a table containing table rows in the following format: <tr id="_C15DKNWCSV">text</tr> I am attempting to scan the webpage and extract all table rows that have an id in the format: id="_(10 RANDOM CHARACTERS)" I want ...

javascripthtmlarraysobjectjquery-selectors

Using a twig loop to display just a single table cell

The following twig loop is used to generate data: {% for reservationDate, rooms in data.pricingTable %} <tr> <td> {% for room in rooms %} <tr> <td ...

htmltwig

Embed a hyperlink within an informational passage

I have a search box with Ajax functionality like this; And I want to customize the NotfindText message to display as: "No results found, but you can try advanced search from here" However, I am struggling to add the link. I do not have much knowledge abo ...

jqueryhtmlajax

unwelcome tab spacing in CSS

I am facing an issue with unwanted spacing in my lists. I have a code that generates three-column lists, each containing about eight rows. However, the first list item of the last row is causing an unwanted space. It seems to shift entirely to the next col ...

htmlcss

What is the best way to determine if a PHP string has identical consecutive letters?

Can you help me figure out why my code isn't working? $pattern_c_sap='/\.\-/'; $local='.................'; $local_array = explode( '', $local ); for($i=0; $i<=$local_length; $i++){ if(preg_match($pattern_c_ ...

phphtmlregex

Headerbar overlapping Div when scrolling

I'm currently trying to create a fixed header bar that allows the content of the page to scroll beneath it rather than displaying above it. This functionality is working on multiple pages, but I'm experiencing issues with my calendar page. When ...

htmlcssangular

What is the best way to incorporate autoplay video within the viewport?

My objective is for the video to automatically start playing when it enters the viewport, even if the play button is not clicked. It should also pause automatically when it leaves the viewport, without the need to click the pause button. <script src=& ...

javascripthtmljquery