CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerviewport-units
Bradley William Elko
Bradley William Elko

Reputation: 364

Why Wont vh Work In Chrome, but It Works In Internet Explorer

So, I am using vh, and, to my knowledge, it is 1 percent the view height of the page. It should work like percentages, but for borders and possibly other things. In Chrome, though, it wont work and leaves white space at the bottom of the Web page. Here is what I am using:

div /*It most be any element I'm just using div for an example*/
{
    border:.5vh solid red;
}

I am asking this because Chrome (being the frustrating piece of work it is) doesn't convert .1vh to .1% like like internet explorer does and I'm left with white space at the bottom. Here is what I'm working on:

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>
    <div class="div02">
        <h2 class="h201">
            <a class="a01" href="personalWeb2.html" style="text-decoration:none">My Band</a>
            <a class="a01" href="personalWeb3.html" style="text-decoration:none">My Ideas</a>
        </h2>
    </div>
    <div class="div03">
        <h2 class="h202">About Me</h2>
    </div>
    <div class="div04">
        <div class="div05">
            <p>Date: 10/4/2016 (Latest Update)</p>
            <blockquote>
                Summary:
                <br/>
                <br/>
                Welcome to my personal website! I am Bradley William Elko, and I am from Brunswick Ohio. I am currently attending MCCC (Medina County Carrer Center). I am taking SEWD1 (a coding class at MCCC). I always had an interest in coding. I am glad to be making my own personal website!
            </blockquote>
        </div>
    </div>
</body>

CSS:

a.a00p5
{
    color:#950f0f;
    padding-left:1.9px;
}
a.a00p5:hover
{
    color:red;
}
a.a00p5:active                                                                                                                                    
{
    color:#ffffff;
    background-color:#B6B2AE;
}
a.a01
{
    color:#950f0f;
    border-left:.3vh solid #950f0f;
    border-right:.3vh solid #950f0f;
    margin-left:1%;
    margin-right:1%;
}
a.a02,a.a03,a.a04
{
    color:#ffffff;
}
a.a02:hover,a.a02:active
{
    color:#3b5998;
}
a.a03:hover,a.a03:active
{
    color:#00aced;
}
a.a04:hover,a.a04:active
{
    color:#bb0000;
}
.address01
{
    text-align:center;
}
body{
    overflow:hidden;
    margin:0px;
}
div.div01 
{
    position:relative;
    text-align:center;
    height:14.3%;
    width:100%;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#73778c;
    border-top:.4vh solid #950f0f;
}
div.div02
{
    border-top:.3vh solid #950f0f;
    border-bottom:.3vh solid #950f0f;
    position:relative;
    height:5%;
    width:100%;
    background-color:#73778c;
    text-align:center;
}
div.div03
{
    position:relative;
    background-color:#73778c;
    height:10%;
    border-bottom:.3vh solid #950f0f;
}
div.div04
{
    position:relative;
    height:69%;
    width:100%;
    background-color:#73778c;
    border-bottom:.4vh solid #950f0f;
}
div.div05
{
    position:relative;
    width:50%;
    height:80%; 
    margin-left:auto;
    margin-right:auto;
    padding-left:1%;
    background-color:#b6b2ae;
    overflow-y:scroll;
}
h1.h101
{
    color:#950f0f;
    font-size:6.75vh;
    margin:0%;
}
h2.h201
{
    text-align:center;
    font-size:4.5vh;
    margin:0%;
    padding:0%;
}
h2.h201,a:hover
{
    color:red;
}
h2.h201,a:active
{
    color:white;
}
h2.h202
{
    font-size:5.2vh;
    color:#950f0f;
    margin:0px;
    text-align:center;
}
img.img01
{
    width:100px;
    height:100px;
}
img.img02
{
    width:100px;
    height:81.2px;
}
img.img03
{
    width:100px;
    height:100px;
    vertical-align: bottom;
}
table
{
    border:2px solid #950f0f;
    margin-top:3%;
    margin-bottom:9%;
    margin-left:auto; 
    margin-right:auto;
}
td:active
{
    background-color:#ffffff;
}
td.td01
{
    border:2px solid #3b5998;
    padding-top:35.5px;
    padding-bottom:36.5px;
}
td.td02
{
    border:2px solid #00aced;
    padding-top:35.5px;
    padding-bottom:36.5px;
}
td.td03
{
    border:2px solid #bb0000;
    padding-top:35.5px;
    padding-bottom:36.5px;
}
th.th01
{
    border:2px solid #3b5998;
    background-color:#ffffff;
}
th.th02
{
    border:2px solid #00aced;
    background-color:#ffffff;
}
th.th03
{
    border:2px solid #bb0000;
    background-color:#ffffff;
}

If you look closely at the bottom of the Web page (on Chrome), you can see white space at the bottom of the page. You have the really look at the bottom to see it. This doesn't happen on Internet Explorer (I'm using a pre-installed version of IE on windows ten, but I don't know what version). If you don't get the same problem, I get I'm sorry that this wasted your time, but I can show you screenshot proof if you really want it.

Things to note:

I have two other pages so there maybe be other things in my css text document that you may encounter. Ignore it.

If percentages don't work than is there another way to simulate them for borders in Chrome?

Thank you for for your time!

Upvotes: 1

Views: 2336

Answers (1)

darrylyeo
darrylyeo

Reputation: 3463

In Chrome, border widths are rounded down to the nearest pixel. Depending on the calculated results of your vh border widths, the sum of the heights and border widths of all your elements may be less than 100%.

You can solve this by applying box-sizing: border-box to all of your elements. This will ensure borders do not change the dimensions of your elements, so you'd only have to ensure your <div> heights add to 100%.

* {
    box-sizing: border-box;
}

However, you choose to do it, never use fixed heights if you can avoid it. Let CSS handle the dimensions naturally.

Upvotes: 2

Related Questions