What is the best way to find out the exact height of the viewport or window on mobile browsers?

When working on my computer or PC, adjusting the height of a div to match the window size is simple. I just use the following CSS code:

div{
  height: 100vh;
}

But when viewing the same page on mobile browsers, the div's height extends beyond the viewport, creating unwanted scrollbars.

This issue occurs on both Chrome and Safari mobile browsers.

Answer №1

Unfortunately, there is not a simple CSS solution for this issue. More information on why can be found here. To achieve 100% of the actual viewport height upon page load, one possible approach is to utilize JavaScript and retrieve the height using window.innerHeight.

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

Tips for linking two divs together - one containing products and the other containing options

Seeking assistance with a coding problem related to showing and hiding items within a div based on the div's ID. Specifically, I have a div containing various products and another div with options related to these products. I need help establishing a ...

What is the best way to incorporate CSS styles into a PHP loop?

Struggling to implement CSS styles on a PHP loop: <h3 class='title'></h3> The CSS style doesn't seem to be taking effect: .title{ color : red; } I attempted surrounding the echo with <?php ?> tags and then applying ...

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

What methods can I use to minimize the gap between images within the <figure> element?

    Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work. I want to display 3 images side by side in one row, but because I'm struggling to ...

Display fixed or absolute elements within a scrollable container

I want to create a unique design with overlapping divs that can be selectively displayed through scrolling. While this effect is possible with images using background-attachment: fixed, I am seeking a solution that can work for any child element. Here is ...

"What is the best way to create a hyperlink in Google Apps Script using HTMLService? (encountering an error with the connection to accounts.google.com

Trying to utilize the Apps Script method setContent() in Google Apps Script to insert a link into a basic index.html file. var newDocLink = "https://docs.google.com/document/d/1loBt7T7-4qd0ORBXiTFeDQxuG..."; // newDocLink variable is set with a Googl ...

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...

What is the most efficient method for integrating PHP script into HTML code?

When it comes to inserting the full path to every image/css file on my website due to url rewriting, I am searching for the most efficient method. I could simply use: <img src='<?php echo $full_path; ?>/images/theImg.jpg' alt='alt ...

selecting a div element with a label using the nth-child property

I recently discovered the CSS3 :nth-child() Selector and decided to create a sample Here is the HTML snippet: <body> <div> <label>dsdf</label></div> <div>seconddiv</div> </body> And here's the CSS par ...

"Error encountered while trying to perform a JavaScript _doPostBack

In my asp.net application, I have an HTML table where each td element has a unique id. When a td element is clicked, I use JavaScript to store the id in a hidden field. After that, I attempt to trigger _doPostBack from JavaScript to utilize the hidden fiel ...

Basic media query does not affect div resizing or font changes in Chrome or Internet Explorer

I am facing an issue with a simple media query that is not working as expected in Chrome or IE, but strangely it works fine in FF. I have tried various formulations of the media query without success. Any assistance would be greatly appreciated. Below is ...

Can an entire application built with a combination of PHP, JavaScript, and HTML be successfully converted to Angular 7?

After creating a complex application that heavily relies on JavaScript, PHP, HTML, and numerous AJAX calls, I am considering migrating the entire codebase to Angular 7. Is it feasible to achieve this transition without requiring a complete rewrite in Ang ...

Sort through categories using PHP and MySQL for an organized search

Hello, I have a search code that I am using: <form action="search.php" method="get"> <input type="text" name="query"> <select name='category'> <option value="all">All categories</option> <? while ($cat = mys ...

Is it acceptable to place a <figure> tag inside a <header> tag within an <article>?

Imagine having this scenario: <article> <header> <h1>Article title</h1> <p>Article kicker</p> <figure> <img class="featured-image" src="http://article.com/featured/image. ...

Facing compatibility problems with JavaScript and Cascading Style Sheets in Google Chrome?

Welcome to the site . Let's address a couple of issues with JavaScript and CSS: Firstly, the JS code seems to be malfunctioning only in Chrome, throwing an error that reads: 'Uncaught TypeError: Object [object Object] has no method 'on prij ...

javascript Why isn't the initial click registering?

In my table, users can select certain rows by using checkboxes. I have implemented some JavaScript functionality that allows them to select each checkbox individually and also use a "Select All" option. Additionally, there is code written to enable the use ...

How to strip HTML tags from a string in PHP while still showing them?

Let's explore the functionality of strip_tags(). strip_tags("<b>TEXT</b>"); The result will be: TEXT But what if I want to keep the tags visible without their effect? The output would look like this: <b>TEXT</b> Is i ...

Issue with Bootstrap navigation bar not displaying on iPad devices

Currently, I am working on creating a custom bootstrap menu that displays properly on an iPad screen size. I have implemented the standard navbar code from Bootstrap with a few tweaks. While it works well on smartphones and laptops, the issue arises when ...