2016-10-18 29 views
1

したがって、私は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で枠線をシミュレートする別の方法よりもパーセンテージがうまくいかない場合は、

ありがとうございます!

+0

Chromeで問題を再現できません。また、あなたの質問は完全に明確ではありません。問題を再現する作業デモを投稿することを検討してください。 [** Stack Snippet **](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)またはサードパーティのIDE jsfiddle.netやcodepen.ioのように。 –

+0

@Michael_Bクロムでうまくいくのですか? –

+0

Chrome、IE11、Edgeの違いはありません。 –

答えて

1

クロムでは、境界線の幅は最も近いピクセルに切り捨てられます。 vhの境界幅の計算結果に応じて、すべての要素の高さと境界幅の合計が100%未満になることがあります。

これはすべての要素にbox-sizing: border-boxを適用することで解決できます。これにより、境界線が要素の寸法を変更しないようにするため、<div>heightを100%に追加するだけで済みます。

* { 
    box-sizing: border-box; 
} 

ただし、あなたがそれをすることを選択した場合、それを避けることができます固定高さを使用しないでください。 CSSが自然に寸法を扱えるようにします。

+0

これはトリックでした!ありがとう。 –

+0

喜んで助けてください! - – darrylyeo

関連する問題