在html/css網站上縮放的問題

-1

所以我試圖讓這個網站過去兩天與我的朋友。大家一直都很順利，我們從這裏得到了很多幫助。雖然我們在網站上的縮放比例存在問題。當我們的網站全屏顯示時，一切正常，但如果您打開了窗口，以便它只覆蓋顯示器的一半，則網站下方會有一個白色塊。你可以看到我的意思是：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

添加min-height: 100vh到body所以它延伸到窗口的底部，如果含量大於瀏覽器窗口短。您也可以添加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網站上縮放的問題

回答

相關問題