Currently, I am utilizing vh for my project, which as far as I know represents 1 percent of the view height of the page. This measurement should function similar to percentages, especially with borders and potentially other elements. However, when I tested it in Chrome, there was an issue where it did not work correctly and resulted in white space at the bottom of the webpage. Here is the snippet I am working with:
div /*It can be any element, I just used div as an example*/
{
border:.5vh solid red;
}
I wanted to inquire about this problem because Chrome seems to handle .1vh differently than .1%, unlike Internet Explorer which converts them consistently. The following HTML and CSS are a part of the project:
HTML:
<head>
<!--
Assignment: Personal Website
Date: 10/4/16
Name: Bradley Elko
-->
<title>Bradley's Website (Me)</title>
<link rel="stylesheet" href="personalWeb1.css">
<meta charset="UTF-8"/>
<meta name="description" content="My personal website"/>
<meta name="keywords" content="Brad,Website,Personal,Information"/>
<meta name="author" content="Bradley William Elko"/>
<link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
<div class="div01">
<h1 class="h101"><a class="a00p5" href="personalWeb1.html" style="text-decoration:none">Bradley's Website</a></h1>
</div>
<!-- More HTML code here -->
</body>
If you pay close attention to the bottom of the web page on Chrome, you will notice the presence of white space that shouldn't be there. This discrepancy does not seem to occur in Internet Explorer. Please note that there may be additional elements in my CSS file due to multiple pages in my project.
In case percentages do not yield the desired results, is there an alternative solution to simulate their behavior for borders specifically in Chrome?
Thank you kindly for taking the time to read through this inquiry!