When the height of a mobile browser exceeds 100vh, the content may either scroll or get cut off

I'm facing an issue with a layout that should fit perfectly within the viewport without exceeding its height. Everything looks good on desktop browsers like Chrome, Safari, and Firefox, but when I switch to iOS Chrome/Safari (and possibly Android as well), the content extends beyond the viewport, requiring scrolling. This seems to be caused by the address bars taking up some space.

This problem occurs with two specific elements:

  • The main content area, which is set to 100vh, causing scrolls.
  • A fixed bar on the left side of the page, which shouldn't scroll at all. However, the logo ends up outside the visible area at the top of the page, indicating that it exceeds the browser's height. The width of this bar is also set to 100vh since it's rotated 90 degrees.

I've tried looking into older articles for solutions, but nothing has worked so far. You can find the code attached below, and I've also created a Codepen for easier viewing on mobile: https://codepen.io/moy/pen/popxXXe

androidhtmlcssiosviewport

Answer №1

Maybe considering Javascript could be beneficial?

element.style.height = window.offsetHeight

I can't guarantee the success of this approach as I haven't tested it myself.

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

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

javascripthtml

Align both vertically and horizontally in the center of the body

I have two images aligned vertically inside a wrapper. How do I center the wrapper within the body? What is the best way to center my wrapper inside the body? <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> ...

htmlcss

Steps to activate configuration file on Android MPlayer

After downloading MPlayer from the Android market, I was pleased to find that it works quite effectively. However, upon inspecting libmplayer.so (which was downloaded with the Android app), I noticed that it references all command-line options, mplayer.con ...

androidvideo-streamingmplayer

Deactivate rounding numbers in jQuery AJAX

When using jQuery to send numbers, I noticed that the decimals are not saved correctly. For example, 2.5 is saved as 3 and 17.5 is saved as 18. $("#sendnomreform").on('submit',(function(e) { e.preventDefault(); $('#loading').s ...

javascriptjqueryhtmlajax

Issues encountered when trying to code a slider for iOS applications

Hello everyone, I'm currently working on creating a slider with 7 different sections where the label changes as you slide through them. I've connected everything using .m and .h files so that the label interacts with the slider. However, only th ...

iosslider

Guide on dynamically adjusting the width of a personalized UIView and all its nested views within a UIViewController through a button-triggered event

I have a unique UIview that I want to customize. Increasing its width dynamically is not an issue, but I also need to adjust the width of its subviews like webviews and labels. However, simply using _view.setframe - xframe; does not solve the problem as th ...

iosuiview

Display exclusively the provided value

Can someone please help me with printing in PDF style and displaying only the inputted value without showing the textbox or dropdown? Check out this image for reference I would like to achieve something similar, how can I do that? Any assistance would be ...

htmlcss

Remove the option to select specific minutes from the time input on an HTML

My HTML code includes a time input that looks like this: <input id="appt-time" type="time" name="appt-time" value="13:30" /> I want to figure out how I can remove the minutes from the input or ensure that the ...

htmltime

The img-wrapper is failing to show the PNG image

I'm having an issue with my code where it displays jpg images but not png. How can I make the img-wrapper show png files as well? In my example, the first image in the array is a jpg while the second is a png. However, I only see the title of the imag ...

javascripthtmljquery

Informing users of the availability of an iOS app on the website

Is there a simple way to notify iOS users about your app when they visit your website? While I know how to detect user agents and write JavaScript, I'm curious if there is an existing library for this purpose. In the absence of such a solution, are t ...

iphonehtmlcssiosipad

How can I resolve the issue of mobileQuery.addEventListener not functioning in Safari while using Angular?

I have been utilizing the angular material sidenav, which includes specific breakpoints for different device widths. Here are some examples: View Angular material documentation example Access the same example in stackblitz This is how it appears: public ...

iosangularsafariangular-material

Why is WhatsApp able to receive several notifications even though APNS typically only stores one when the device is offline?

As per the official Apple documentation, the APNS (Apple Push Notification Service) is designed to store only the latest notification if the device happens to be offline. The Apple Push Notification Service has a default Quality of Service (QoS) element t ...

iosswiftfirebasepush-notificationfirebase-cloud-messaging

Volley not returning response for JSONObjectRequest in Android Pie

Why am I not getting any response in Volley for Android Pie? Do I need to make specific configurations for Android Pie? ...

androidapiandroid-volley

Is there a way in HTML to navigate directly to a specific element on another page, even if it is not currently visible

I have used an anchor to navigate to a specific element on another page from the current page. However, the specific element I want to navigate to is not currently visible because it is controlled by JavaScript to keep the page short. The element is only s ...

javascripthtml

Version 4.0.0 of the Mapbox tracking mode software development kit (SDK

I'm currently struggling with setting the center of the map in my Android Mapbox SDK 4.0.0 project whenever the location changes. I am having difficulty understanding how to use MyLocationTrackingMode and pass the current latitude and longitude to Cam ...

androidmapbox

Customizable List: varying background hues for ListGroup elements

I'm trying to customize the background colors for my ListGroup items in a list. I want to use #E1E1E1 for even items and #C2C2C2 for odd items. It's somewhat working, but only for the visible part of the list when the activity is first opened. As ...

javaandroidxml

Is it possible to dynamically append and delete rows of interconnected dropdown menus?

I'm currently working on a form that allows users to add and remove rows with cascading dropdowns for class selection. Everything is functional except for the feature to remove selected classes. I've experimented with different methods like the ...

javascripthtmljqueryformsfrontend

Obtaining a substantial pdf file using html2pdf

While using html2pdf to generate a PDF of my website, I noticed that the downloaded PDF ends up being 14 pages long. However, after approximately 12 pages, all the colored elements seem to disappear. On mobile screens, this issue occurs even sooner, around ...

javascripthtmlhtml2pdf

What is the best way to incorporate an image into an element to maximize the available space?

How can I enlarge the image to fully occupy the space available in an element block, similar to the following image: (the black box represents the element box and the grey area is supposed to be the image.) https://i.sstatic.net/F0E82.png In the current c ...

htmlcssbootstrap-5

Creating a interactive navigation bar with External JSON data in HTML and JavaScript

Is there a way to create a dynamic MenuBar by using an external JSON file? How can I write HTML code to fetch and display JSON data dynamically? What is the process for reading a JSON file? //JSON File = Menu.Json {"data": [{"id": "1", "text": "F ...

javascripthtmljsonajax