html/cssウェブサイトのスケーリングに関する問題

-1

私はこのウェブサイトを私の友人と一緒に過去2日間にしようとしました。誰もがスムーズに進んでおり、ここから多くの助けを得ました。私たちはウェブサイト上でのスケーリングについて問題を抱えていますが。私たちのウェブサイトが全画面表示されているときは問題ありませんが、ウィンドウの半分がモニタに表示されるようにウィンドウを開いていると、ウェブサイトの下に白いブロックが表示されます。あなたは私がここで何を意味するか見ることができます：https://gyazo.com/103cf6b312512a2ce9fdac7e23788fdf はhtml/cssウェブサイトのスケーリングに関する問題

<style> 
 
.Button { 
 
    background-color: Plum; 
 
    border: 1px solid; 
 
border-color: black; 
 
    color: white; 
 
    padding: 10px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
font-family: hacked; 
 
border-radius: 8px; 
 
text-shadow: 2px 2px grey; 
 
    
 
    
 
} 
 

 
    .sub { 
 
    position: relative; 
 
} 
 
.itmHolder { 
 
    position: relative; 
 
} 
 

 
    
 
    
 
    .itmHolder:nth-child(2), 
 
.itmHolder:nth-child(3) { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.og { 
 
    margin-top: 50px; 
 
    position: center; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 400%; 
 
color: Plum; 
 
text-shadow: 4px 4px Black; 
 
} 
 
body { 
 
    background-image: url("lightning.gif"); 
 
    background-repeat: no-repeat; 
 
    -webkit-transform: rotateX(0); 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
a:link, a:visited { 
 
    color: black; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 

 
</style>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Our Future</title> 
 
</head> 
 
    
 
<body background="lightning.gif"> 
 
    
 
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed> 
 

 

 
    <center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html"> 
 
    
 
    
 
    <div class="og"> 
 
    <div class="itmHolder"> 
 

 
    <div class="sub"> 
 
     <button type="button" class="Button"><a href="side2.html">About us</a></button> 
 
     <button type="button" class="Button"><a href="buynow.html">Buy now</a></button> 
 
    </div> 
 
    
 
    
 
    
 
    <br></br> 
 
</body> 
 
</html> 
 
    <picture> 
 
    <!--Billede--> 
 
    <br></br> 
 
    <br></br> 
 
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/> 
 
<br></br> 
 
<br></br> 
 
</picture>

出典

2017-06-20 EmalGod

ありがとうコンテンツは、ブラウザのビューポートよりも短い場合には、ウィンドウの一番下まで伸びてbodyにmin-height: 100vhを追加します。また、margin: 0を追加して、ブラウザがコンテンツよりも背が高い場合、デフォルトのマージンでウィンドウを垂直にスクロールさせないようにすることもできます。

<style> 
 
.Button { 
 
    background-color: Plum; 
 
    border: 1px solid; 
 
border-color: black; 
 
    color: white; 
 
    padding: 10px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
font-family: hacked; 
 
border-radius: 8px; 
 
text-shadow: 2px 2px grey; 
 
    
 
    
 
} 
 

 
    .sub { 
 
    position: relative; 
 
} 
 
.itmHolder { 
 
    position: relative; 
 
} 
 

 
    
 
    
 
    .itmHolder:nth-child(2), 
 
.itmHolder:nth-child(3) { 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
.og { 
 
    margin-top: 50px; 
 
    position: center; 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    font-size: 400%; 
 
color: Plum; 
 
text-shadow: 4px 4px Black; 
 
} 
 
body { 
 
    background-image: url("http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg"); 
 
    background-repeat: no-repeat; 
 
    -webkit-transform: rotateX(0); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    min-height: 100vh; 
 
} 
 

 
a:link, a:visited { 
 
    color: black; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
} 
 

 

 
</style>

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Our Future</title> 
 
</head> 
 
    
 
<body background="lightning.gif"> 
 
    
 
<embed name="myMusic" loop="true" hidden="true" src="thunder.mp3"></embed> 
 

 

 
    <center><h1 style="font-family:blowbrush;">Future</center></h1><form action="side2.html"> 
 
    
 
    
 
    <div class="og"> 
 
    <div class="itmHolder"> 
 

 
    <div class="sub"> 
 
     <button type="button" class="Button"><a href="side2.html">About us</a></button> 
 
     <button type="button" class="Button"><a href="buynow.html">Buy now</a></button> 
 
    </div> 
 
    
 
    
 
    
 
    <br></br> 
 
</body> 
 
</html> 
 
    <picture> 
 
    <!--Billede--> 
 
    <br></br> 
 
    <br></br> 
 
<center><img src="ourfuture.png" alt="Matrix" width="700" height="400" border="5"><center/> 
 
<br></br> 
 
<br></br> 
 
</picture>

出典

2017-06-20 21:33:46

はは、ヘルプと大笑いしてくれてありがとう！ – EmalGod

あなたは@EmalGodを賭ける:) –

html/cssウェブサイトのスケーリングに関する問題

答えて

関連する問題