0
我的網站出現問題，我嘗試了所有內容，但仍未找到解決方案。網站在較大的屏幕上出現混亂，並在較小的屏幕上顯示滾動條
我想使我的網站在所有計算機屏幕尺寸上幾乎完全相同。 當我在較大的屏幕上測試它時，頁腳與頁面內容的其餘部分之間會出現間隙。 當我在較小的屏幕上測試它時，它顯示正常，但您必須垂直和水平滾動。
<!DOCTYPE HTML>
<html>
<head>
<title>Royal Scottish Country Dance Society</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="CSS/general.css">
<link rel="stylesheet" type="text/css" href="CSS/index.css">
<style>
@font-face {
font-family: 'Myriad Pro Regular';
src: url('../Fonts/MyriadPro-Regular.otf');
}
@font-face {
font-family: 'Myriad Pro Bold';
src: url('Fonts/MyriadPro-Bold.otf');
}
p {font-size:65%; text-align:left; padding-right:18%;}
h2 {
font-size:98%;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="header">
<h1 class="alignleft"> RSCDS <span style="font-size:30%">Royal Scottish Country Dance Society</span></h1>
<h1 class="alignright"> Call us on <span>07459107891</span><br/>
for any further details </h1>
</div>
<div id="vmenu">
<ul>
<li><a href="index.html"><span class="current">Home</span></a></li>
<li><a href="confweek.html">Conference<br>
Weeekend</a></li>
<li><a href="danceprog.html">Dance<br>
Program</a></li>
<li><a href="teachers.html">Teachers</a></li>
<li><a href="travel.html">Travel</a></li>
<li><a href="stay.html">Where to Stay</a></li>
<li><a href="join.html">Join Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="vmenu2"></div>
<img id="pattern2" src="Patterns/im4.jpg"/> <img id="pattern" src="Patterns/Pattern_1.jpg"/>
<div id="pagewrap">
<h2>Welcome to the royal scottish country<br>
dance society</h2>
<p> The youth groups of the RSCDS run a weekend conference every year. The event runs from Friday evening to Sunday lunchtime, and is a mixture of Scottish country dance and other classes for all levels of dancers from beginners to advanced along with meetings, evening dances and other social events. Young dancers in each area take it in turns to host the event and it is anticipated that the event will be held in Glasgow in 2015. Join us for a totally unique dance experience. With three days of performances, classes, advice and fun, RSCDS is your chance to design your perfect day of dance. <br>
<br>
There's plenty to choose from no matter your ability level. </p>
<h2>WHOEVER YOU ARE, WHEREVER YOU ARE <br/> FROM, COME DANCE WITH US!</h2>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
和CSS：
body {
margin: 0 auto;
height: 100%;
width: 100%;
}
div#header {
margin: 0;
padding: 0;
width: 100%;
height: 85px;
min-height: 9.5%;
background: #4F4F50;
position: relative;
}
div#footer {
margin: 0;
background: #4F4F50;
width: 100%;
height: 50px;
bottom: 0;
padding: 0;
position: fixed;
min-height: 5.5%;
}
div#pagewrap {
padding: 1.77% 20% 0% 15.5%;
font-family: "Myriad Pro Regular";
width: 27%;
}
div#vmenu {
margin: 0;
padding: 2% 1% 0% 0%;
background: #09051A;
width: 12%;
height: 672px;
float: left;
}
div#vmenu2 {
margin: 0;
padding: 0;
background: #09051A;
width: 12%;
height: 672px;
float: right;
}
div#vmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li {
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul a:link {
margin: 0;
padding: 6% 8% 5% 0%;
text-align: right;
text-decoration: none;
font-family: 'Myriad Pro Regular';
color: #ffffff;
display: block;
width: 100%;
}
div#vmenu ul a:visited {
margin: 0;
text-decoration: none;
font-size: medium;
font-family: 'Myriad Pro Regular';
color: #ffffff;
}
div#vmenu ul li a:hover {
margin: 0;
text-decoration: none;
font-family: 'Myriad Pro Regular';
font-size: medium;
color: #289280;
}
img#pattern {
width: 31%;
padding: 3% 5.5% 3.5% 2%;
float: right;
}
img#pattern2 {
height: 668px;
padding: 0;
float: right;
width: 6.7%;
min-width: 100px;
min-height: 668px;
}
h1 span {
font-size: 180%;
}
h2 {
font-size: 110%;
width: 100%;
font-family: "Myriad Pro Bold";
}
h3 {font-size: 100%;
font-family: 'Myriad Pro Bold';
}
p a {
text-decoration: none;
color: #289280;
}
.wrapper {
margin: 0 auto;
width: 100%;
max-width: 1440px;
min-width: 1440px;
position: relative;
}
.alignleft {
margin: 0;
padding: 0;
color: #ffffff;
font-size: 400%;
font-family: 'Myriad Pro Bold';
padding: 0.7% 0% 0% 1.3%;
float: left;
position: absolute;
}
.alignright {
margin: 0;
color: #ffffff;
font-size: 80%;
font-family: 'Myriad Pro Bold';
padding: 1.2% 0% 1.3% 82.5%;
position: absolute;
}
.current {
color: #289280;
width: 100%;
}
@media屏幕和（max-device-width：480px）{ //你的風格在這裏...... \t} – kashinath
另外我想提一個重要的是，你不能讓你的網站與特定設備/屏幕上的桌面一樣。你需要讓你的網站反應靈敏。 – kashinath
@ kashinath ...謝謝兄弟... – Shardul