Question

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

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

我问的是因为Chrome（这是令人沮丧的工作）并不像互联网资源管理器那样转换.1vh to .1%，而我在底部留下了空白区域。这是我正在做的事情：

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上），您可以在页面底部看到空白区域。你真的看到底部看到它。这在Internet Explorer上不会发生（我在Windows 10上使用预安装的IE版本，但我不知道是什么版本）。如果你没有遇到同样的问题，我很抱歉这浪费了你的时间，但如果你真的需要，我可以给你看截图证明。

注意事项：

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

如果百分比不起作用，那么还有另一种方法可以在Chrome中模拟边框吗？

感谢您的时间！

Answer 1

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

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

height

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

为什么不在vh中工作，但它在Internet Explorer中工作

1 个答案: