したがって、私はvh
を使用しています。私の知る限り、ページのビューの高さは1 percent
です。それはパーセンテージのように動作するはずですが、国境などの可能性があります。しかし、Chromeでは、それは動作しませんし、Webページの下部に空白を残します。ここで私は使用していますものです:なぜChromeでは動作しませんが、Internet Explorerで動作します
div /*It most be any element I'm just using div for an example*/
{
border:.5vh solid red;
}
私はこれを求めていますInternet Explorerのように行い、私はで白いスペースが残ってるようクローム(仕事のイライラ作品であること、それはある).1vh to .1%
を変換していないため、下。あなたは(クローム上の)Webページの一番下をよく見ると
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;
}
:
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をここで私が働いているものですページの下部に空白が表示されます。あなたは本当に底を見てそれを見ることができます。これはInternet Explorerで起こることはありません(私はWindows上でIEのプリインストールされたバージョンを使用していますが、私はどのバージョンがわかりません)。あなたが同じ問題を抱えていないなら、私はこのことがあなたの時間を無駄にして申し訳なく思っています。
物事は注意する:
私は、あなたが発生する可能性があり、私の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の違いはありません。 –