Почему не работает в Chrome, но работает в Internet Explorer
Итак, я использую 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 (я использую предустановленную версию IE на Windows 10, но я не знаю, какая версия). Если у вас не возникнет та же проблема, мне жаль, что это потратило впустую ваше время, но я могу показать вам снимок экрана, если вы действительно этого хотите.
Что следует отметить:
У меня есть две другие страницы, поэтому в моем текстовом документе CSS могут быть другие вещи, с которыми вы можете столкнуться. Игнорируй это.
Если проценты не работают, то есть ли другой способ смоделировать их для границ в Chrome?
Спасибо за ваше время!
1 ответ
В Chrome ширина границы округляется до ближайшего пикселя. В зависимости от рассчитанных результатов вашего vh ширины границ, сумма высот и ширины границ всех ваших элементов может быть менее 100%.
Вы можете решить это, подав заявку box-sizing: border-box для всех ваших элементов. Это гарантирует, что границы не изменят размеры ваших элементов, поэтому вам нужно только убедиться, что <div>heights добавить до 100%.
* {
box-sizing: border-box;
}
Тем не менее, вы решите сделать это, никогда не используйте фиксированную высоту, если вы можете избежать этого. Позвольте CSS обрабатывать размеры естественным образом.