この問題を解決するにはどうすればよいですか。サイトに表示されるテキストで私のコードの主要部分を詰め込むと、最終的にスクロールバーが表示されます。下にスクロールすると、上部のバナーが繰り返されます。より多くのテキストでもう一度行うと、同じことが何度も繰り返されます。
これまでの私のコードは次のとおりです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>MC serverlist</title>
</head>
<body id="servers">
<div id="maincontainer">
<ul id="navlist">
<li><a href="index.php" id="servers_nav">SERVERS</a></li>
<li><a href="skins.php" id="skins_nav">SKINS</a></li>
<li><a href="resource-packs.php" id="resource-packs_nav">RESOURCE PACKS</a></li>
<li><a href="builds.php" id="builds_nav">BUILDS</a></li>
<li><a href="mods.php" id="mods_nav">MODS</a></li>
<li><a href="forum.php" id="forum_nav">FORUM</a></li>
</ul>
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text
</div>
</body>
</html>
CSS コード
html, body {
height: 100%;
margin: 0;
background: #A3A3A3;
background-image: linear-gradient(180deg, #7D7D7D, #7D7D7D 50px, transparent 57px, transparent 140%);
}
#maincontainer {
min-height: 100%;
width: 960px;
min-width: 600px;
margin: auto;
border: ridge;
border-color: #919191;
border-top: 0;
border-bottom: 0;
background: rgba(255,255,255,0.35);
padding-left: 16px;
padding-right: 16px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
padding-top: 6px;
}
ul li {
float:left;
margin-right: 12px;
border: groove;
border-width: 2px;
border-color: #969696;
}
ul li a {
display:block;
padding-left: 5px;
padding-right: 5px;
height: 38px;
background-color:#7D7D7D;
text-align: center;
text-decoration: none;
line-height: 37px;
color: #EDEDED;
font-weight: bold;
font-family: impact;
font-size: 1.8em;
}
ul li:hover {
float:left;
margin-right: 12px;
border: ridge;
border-width: 2px;
border-color: #969696;
}
ul li a:hover {
color: white;
}
ul li a:active {
background-color: black;
}
オンライン コード テスターではなく、localhost で試してみてください。ありがとう