The accuracy of VW and VH units is questionable

width: 100vw;/* Taking up the entire viewport width */
height: 100vh;/* Occupying the full height of the viewport*/

Despite my efforts to make this CSS match the exact dimensions of the viewport at 100%, it seems to be too large and causing overflow on the page.

I have eliminated padding, margin, and outline as possible causes for this issue.

Note: Interestingly, the problem only escalates when I introduce two divs with these specific dimensions. (although this behavior is consistent in jsfiddle)

http://jsfiddle.net/0psu7ys6/

Is it worth treating this as a bug and coming up with a workaround? Or am I overlooking something crucial?

htmlcssviewport-units

Answer №1

The dimensions of the viewport are precise. The issue arises from your div being styled as an inline-block. When rendered by the browser, the inline-block element is placed on a line box, with whitespace underneath that serves as space for typographic descenders. This extra space, in conjunction with your div, causes overflow.

To resolve this problem, you can remove the display: inline-block property so that your div is displayed as a block-level element. This adjustment will eliminate the scrollbars and allow the div to fit perfectly within the viewport.

If maintaining the inline-block style is necessary, applying vertical-align: top (or bottom or middle) appears to solve the issue.

Answer №2

We can approach this problem from a different angle

One solution is to adjust the line-height of the entire body using vh

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

Utilizing arrays to dynamically alter the text color of specific words in an input field

Currently, I am in the process of working on a JSFiddle and find myself a bit puzzled by a certain aspect. Within my project, I have an input box named myTextField which contains a random paragraph. Additionally, there is a button that triggers my change f ...

javascripthtmlcss

Is it advisable for a component to handle the states of its sub-components within the ngrx/store framework?

I am currently grappling with the best strategy for managing state in my application. Specifically, whether it makes sense for the parent component to handle the state for two subcomponents. For instance: <div> <subcomponent-one> *ngIf=&qu ...

htmlangulartypescriptngrx

The debate over website background images: balancing size and speed

Has anyone experimented with background images and their impact on web design? Typically, backgrounds are designed to repeat in either the x or y direction, or both. For example Consider a gradient background that repeats horizontally. If the gradient i ...

htmlrenderingbackground-image

Utilize jQuery to locate and remove entire rows containing cells with specific text

Currently, I am exploring table manipulation with jQuery. My objective is to scan an entire column based on its header to identify specific values. Once these values are identified, my goal is to delete the entire row containing that value. At this point, ...

javascriptjqueryhtmlhtml-table

Inserting a border both above and below an element may result in the parent overflowing

I am facing an issue similar to the following: div.parent { height: 100px; padding: 20px; box-sizing: border-box; overflow: auto; } div.parent div.thing { height: 20px; width: 90%; border: 1px solid black; } <div class="parent"> ...

htmlcssborder

How can you achieve the effect of "hovering over an image to automatically start playing a muted video within the image itself"?

[![enter image description here][1]][1]I am working with WordPress and Elementor, and I want to create a hover effect where an image triggers a muted video to play within the image area on mouseover. The video should stop playing when the mouse is not hove ...

javascripthtmlcsswordpresselementor

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template. Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks goo ...

htmlcsstwitter-bootstrap

Combine and blur multiple background images using CSS blending techniques

I am currently working on a website, which is just a demo built in ReactJS: The issue I'm facing is related to the background. The idea behind the app is simple - it consists of 4 parts, with the top part displaying weather information without a bac ...

htmlcssreactjsblurry

Selecting properties from a GeoJSON object on the fly with Leaflet

I am currently attempting to dynamically modify the displayed property on my leaflet map. Below is the code I have been working with: $("#button_thermal").click(function(){ $.getJSON("physicalProperties.geojson", function(data) { var geojson2 = L.geoJson( ...

javascripthtmlleafletmapping

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

htmlvue.jsvuejs2vuetify.js

Please insert a border shade on my navigation bar

I have been attempting to add a special effect to my menu. Specifically, I have been trying to include a 3px border at the top of each "li" element in my menu that only appears when hovered over. Unfortunately, my attempts using :after pseudo-selector hav ...

htmlcss

Is there a way for me to manually initiate a digest cycle on the parent scope based on my instructions?

I am struggling with getting a directive to render automatically when a change is made to the underlying model programmatically. Using $scope.$apply seems like the right approach, but unfortunately it's not working as expected. The directive only rend ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

What is the process for changing the background color when a button or div is pressed, and reverting the color back when another button or div is

Looking to customize a list of buttons or divs in your project? Check out this sample layout: <button type="button" class="btn" id="btn1">Details1</button> <button type="button" class="btn" id="btn2">Details2</button> <button ty ...

javascripthtmlcss

Determine whether to deliver compressed or uncompressed js and css files by utilizing url parameters in AngularJs and Grunt

Exploring the world of AngularJS and Grunt is a new adventure for me. I am currently in the process of setting up the front-end environment and am looking for a way to serve either compressed or uncompressed js and css files based on specific url parameter ...

javascriptcssnode.jsangularjsgruntjs

Problem with Google+ Button Alignment

I arranged my social media buttons in a row - Twitter, Facebook & Google+. The issue is that the Google+ button is not aligning properly. It appears to be spaced out about 3 times further than the Twitter and Facebook buttons. I attempted adjusting the p ...

htmlcssbutton

Scaling problem faced on iOS devices with HTML5 canvas

I've been working on a project using phonegap, trying to develop it for both Android and iOS. The main goal is to select a saved image from the phone library, display that image on an HTML img element, and then draw that img onto a canvas. Users shoul ...

ioshtmlcanvascordovascaling

Showcase the loop field of Advanced Custom Fields

I've been struggling to get a repeater field consisting of images to show up on my WordPress template, but it's just not cooperating. I even went through the documentation of the plugin: Unfortunately, I still can't seem to get it to functi ...

phpjavascriptjqueryhtmlplugins

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

jquerycssforms

The QWebview is not rendering the HTML page correctly

I am currently working on a software project that includes a QWebView for displaying HTML files. However, I am facing an issue with the welcome page not displaying correctly. Instead of having an image between the red lines at the center, it appears unusua ...

htmlcssqtqwebview

In Google Chrome, the edges of hexagons appear jagged and not smooth

I have encountered an issue in Chrome where I created a hexagon group using HTML and CSS. While it displays fine in Firefox, the edges of the hexagons appear distorted in Chrome. Here are my code snippets: HTML <div class="col-sm-12 margin-left-100" i ...

javascriptjqueryhtmlcssgoogle-chrome