Dynamic resizing of DIVS occurs when the address bar is hidden on Mobile Chrome

As I work on designing a website, I have utilized sections with the same class and set their height to 100vh. Everything appears to be functioning correctly when viewed on a browser, however, issues arise when accessing the site on phones.

Whenever I scroll down, the divs scale up in an attempt to fill the space left by the address bar. Despite trying various solutions, the problem persists. If anyone could provide assistance, I would greatly appreciate it. Thank you.

Visit www.nachopalaciosdg.com.ar/ejemplo/index.html for reference.

javascriptjqueryhtmlcss

Answer №1

Is it possible that the viewport height changes when the bar hides? Maybe setting a max-height value or using JavaScript to define the height on page load could help.

Here is an example of how you could do this:

document.getElementById("myID").style.height = window.innerHeight + "px";

Alternatively, with jQuery, you can target all elements with the same class easily:

$(document).ready(function() { 
     $(".myClass").height(window.innerHeight);
}

If you want to make sure each element takes up the full viewport height, CSS might not be enough to solve the issue.

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

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

javascriptjqueryhtmliframe

Loop through individual divs containing radio buttons and check them one by one with a slight delay

I have implemented HTML tabs using radio buttons, similar to the demo showcased at https://css-tricks.com/examples/CSSTabs/radio.php. Here's the basic markup: <div class="tab"> <input type="radio"> <p>Content displayed when radio bu ...

javascriptjqueryhtmltabsradio-button

Steps to update XmlHttpRequest URL during image upload

I am currently facing an issue with updating images on my website. When I try to update an image, it redirects to the wrong URL instead of the intended one. The form is set to post data to this URL: POST http://127.0.0.1/mgt/upload/processImage/foodImage ...

javascriptphpjqueryxmlhttprequestcodeigniter-3

AngularJS JQ Widgets Chart Display Issue

Trying to incorporate a chart using JQ widget, the code snippet below shows my controller code. When making an ajax call to retrieve data from the server, the response is received but the chart displays the previous data of that variable as undefined. Hard ...

javascriptjqueryangularjsjsonjqwidget

Using jQuery and C# (.Net 8) to send an array of form files from Ajax to Controller

Currently, I am working on a .Net 8 API project and facing an issue with passing multiple files along with other form elements to the controller using ajax. While I have been successful in passing a single file, I am unable to pass an array of files as ex ...

c#jquery.netajaxupload

Performing Jasmine unit testing on a component that relies on data from a service, which itself retrieves data from another service within an Angular 2+ application

Attempting to implement unit testing for a service using httpmock has been challenging. The service in question utilizes a method to make http get calls, but I have encountered difficulties in writing the test cases. saveservice.service.ts -- file const ...

javascriptangulartypescriptunit-testingjasmine

Issue with chrome manifest 2 json background not functioning properly

I am currently developing a Chrome app that displays a Twitter search widget. I have encountered an issue where my app works perfectly with manifest version 1, utilizing "background_page" to display the main HTML page effectively. However, when switching t ...

javascriptjsongoogle-chromemanifest

Using jQuery, how can I dynamically change the stacking order of an element when clicked?

I'm struggling to change the z-Index on button click. I have a static image and a dynamic div, and I want to send the #imgDiv1 behind the static image. Unfortunately, despite trying everything, I haven't been able to achieve this. You can check ...

javascriptjqueryhtmlcssz-index

The output is not shown because the form data is not being generated properly by document.getElement

<html> <head> </head> <body style = "text-align:center;" id = "body"> <form id = "number" method="get" name="number"> <input type="text" id="number1" name="number1" value="" /> <input type="text" id="number2" name="nu ...

javascripthtmlarraysjson

Issues with Gridview functionality for Javascript Calendar

The calendar feature in the Gridview is not functioning properly. I have assigned unique values to both the Gridview textbox and calendar image button. However, the click event of the calendar is not working within the Gridview. The same code works fine ...

javascriptc#asp.netgridview

In IE8, a border is applied to the max-width property when the width is set to

I'm attempting to design a box that adjusts in size according to the parent container, utilizing a mix of max-width and width:100%. With this setup, the box's width is determined by the max-width property, ensuring it shrinks within its boundari ...

htmlinternet-explorer-8css

Working with JSON in AJAX with Javascript and C# to handle array data

When attempting to send an array via AJAX using JSON, I am encountering a problem where my C# handler is unable to properly handle the query. It seems that the querystrings are merging together inexplicably. In the scenario presented here, I am trying to ...

c#javascriptajaxjson

Dealing with asynchronous calls in useEffect.Here are some tips for managing

When invoking a function from within a useEffect, which is located in a different class, there seems to be an issue with receiving the expected data back. The function call triggers another async function that makes an API call and performs operations on t ...

javascriptreactjsaxios

Currently, I am in the process of constructing a DSpace repository on an Ubuntu 16.04

I have successfully set up a DSpace repository on Ubuntu 16.04 LTS by following the installation instructions provided in this manual. After deploying the webapps, I encountered an issue when trying to add new items. Upon clicking the search link, I recei ...

csssolrubuntu-16.04dspace

Navigate back to the previous route within the Vue router hierarchy

In my Vue application, I have a Settings page with child routes such as settings/user, settings/addUser, etc. I am looking to implement a back button that when pressed, takes the user back to the specific page they visited within the Settings section. Usin ...

javascriptvue.jsvuetify.jsvue-router

Error in SO Embed Snippet Fiddle due to Bootstrap 4 JS Issue

Just wondering, any idea why the bootstrap 4 js is throwing this error: https://i.sstatic.net/J4Iq4.png when trying to embed the snippet? (No errors in the external Fiddle) Added tether.js but no luck (kept it commented). Switched to jQuery 2.2.1 on th ...

javascriptjquerystack-overflowjsfiddletwitter-bootstrap-4

CSS animation featuring dynamic source path

Trying to create an image with a dynamic path led me to the common solution of using document.getElementById(); However, I encountered a problem - my controller was being called before the HTML was fully loaded, resulting in an error because the id was ...

javascriptangularjsdomcss-animationsgetelementbyid

Databinding with AngularJS inside pre tags

Attempting to demonstrate databinding in a code snippet, but it keeps evaluating within the pre tag! Even when using { and }, it still evaluates. It's almost comical how such a simple issue is proving difficult to find an answer for online. ...

htmlangularjsdata-binding

Parsing HTML with a simple DOM parser

I am utilizing the simple php dom parser in my project. Within my loaded dom, there is a link that appears like this in html: <a href="...">Some const tesxt</a> I am wondering how I can utilize the find function to select this particular obje ...

phphtmldom

Nested Bootstrap structure with a column containing two sub-columns

I am attempting to create a grid layout using bootstrap. The layout should consist of a full 12 column layout on desktop, with an 8 column grid and a 4 column grid within it. The 8 column grid will contain an image/text, while the 4 column grid will have t ...

htmlcssbootstrap-4