Итак, я использую vh и, насколько мне известно, это 1 percent высота просмотра страницы. Он должен работать как проценты, но для границ и, возможно, для других вещей. Однако в Chrome он не работает и оставляет пустое пространство внизу веб-страницы. Вот что я использую:Почему Wont vh работает в Chrome, но он работает в Internet Explorer
div /*It most be any element I'm just using div for an example*/
{
border:.5vh solid red;
}
Я спрашиваю это потому, что Chrome (будучи расстраивает часть работы оно) не преобразует .1vh to .1%, как, как Internet Explorer делает, и я остался с Пустым пространством дно. Вот то, что я работаю над:
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, но я не знаю, какую версию). Если у вас нет той же проблемы, я получаю, что мне жаль, что это потратило ваше время, но я могу показать вам скриншоты, если вы действительно этого хотите.
Things отметить:
У меня есть две другие страницы, так что, возможно, будут другие вещи в моем CSS текст документа, который вы можете столкнуться. Игнорируй это.
Если проценты не работают, чем есть другой способ имитировать их для границ в Chrome?
Благодарим вас за ваше время!
Невозможно воспроизвести проблему в Chrome. Кроме того, ваш вопрос не совсем ясен. Рассмотрите возможность публикации рабочей демонстрации, которая воспроизводит проблему. Вы можете использовать [** Stack Snippet **] (https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) или стороннюю среду IDE как jsfiddle.net или codepen.io. –
@Michael_B Это работает для вас в хроме? –
Я не вижу разницы между Chrome, IE11 и Edge. –