为什么 vh 在 Chrome 中不起作用，但在 Internet Explorer 中却起作用

Question

因此，我使用 vh，据我所知，它是 1 percent 页面的视图高度。它应该像百分比一样工作，但适用于边界和其他可能的东西。但是，在 Chrome 中，它不起作用，并在网页底部留下白色 space。这是我正在使用的：

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

我问这个是因为 Chrome（这是一件令人沮丧的工作）不会像 Internet Explorer 那样转换 .1vh to .1%，我只剩下白色 space 在底部。这是我正在做的事情：

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;
}

如果仔细查看网页底部（在 Chrome 上），您可以看到页面底部有白色 space。你必须真正看到底部才能看到它。这不会发生在 Internet Explorer 上（我使用的是 windows 10 上预装的 IE 版本，但我不知道是什么版本）。如果您没有遇到同样的问题，很抱歉浪费了您的时间，但如果您确实需要，我可以向您展示屏幕截图证明。

注意事项：

我还有另外两个页面，因此您可能会在我的 css 文本文档中遇到其他内容。忽略它。

如果百分比不起作用，那么还有另一种方法可以在 Chrome?

中模拟它们的边框

感谢您的宝贵时间！

Answer 1

在 Chrome 中，边框宽度向下舍入到最接近的像素。根据您 vh 边框宽度的计算结果，您所有元素的高度和边框宽度之和可能小于 100%。

您可以通过对所有元素应用 box-sizing: border-box 来解决这个问题。这将确保边框不会改变元素的尺寸，因此您只需确保 <div> height 加到 100%。

* {
    box-sizing: border-box;
}

但是，你选择这样做，如果可以避免，就不要使用固定高度。让CSS自然地处理尺寸。

为什么 vh 在 Chrome 中不起作用，但在 Internet Explorer 中却起作用

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

html

css

google-chrome

internet-explorer

viewport-units