我已将所有溢出设置为自动，因此理论上它应该允许我在内容占用超过100％的空间时滚动。它可能是一个明显的显而易见的东西，但任何帮助都会受到赞赏！
http://www.marasites.com/?name=iSell&page=Style1
<title>Marasite by iSell</title>
<body leftmargin='0' rightmargin='0' topmargin='0' marginwidth='0' marginheight='0'>
<meta http-equiv='Content-Type' content='text/html; cht=ISO-8859-1'>
<!DOCTYPE HTML>
<head>
<link href='
https://fonts.googleapis.com/css?family=Pacifico|Quicksand' rel='stylesheet' type='text/css'>
<style>
* {
margin: 0, padding: 0
}
div {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
#container {
width: 100%;
height: auto;
background-color: #3d3c3a;
font-family: 'Quicksand', sans-serif;
font-size: 15px;
color: #022a31;
overflow: auto;
}
#container i {
font-size: 15px;
color: #022a31;
text-decoration: none;
}
#container b {
font-size: 16px;
font-weight: 700;
}
#container h1 {
font-size: 24px;
font-family: 'Quicksand', sans-serif;
text-align: center;
color: grey;
margin: 0;
}
#container h1::first-letter {
color: #2b3547;
}
#container h2 {
font-size: 48px;
font-family: 'Quicksand', sans-serif;
text-align: center;
color: grey;
margin: 0;
}
#container h2::first-letter {
color: #2b3547;
}
#container a {
color: white;
background-color: grey;
text-decoration: none;
padding: 3px;
margin-top: 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#column1 {
width: 25%;
min-height: 100%;
background-image: url("http://hdwallpaperia.com/wp-content/uploads/2014/01/Galaxy-Space-Stars-Wallpaper-Image.jpg");
position: fixed;
left: 0;
right: 0;
}
#c1box i {
font-size: 12px;
color: #3d5072;
text-decoration: none;
}
#c1box b {
font-size: 14px;
color: #07162f;
font-weight: 700;
}
#c1box h1 {
font-size: 16px;
color: grey;
font-family: 'Quicksand', sans-serif;
}
#c1box img {
width: 150px;
height: 150px;
border-style: solid;
border-width: 2px;
border-color: grey;
}
#c1box h1::first-letter {
color: #2b3547;
}
#c1box a {
color: white;
background-color: grey;
text-decoration: none;
padding: 3px;
margin-top: 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#c1box {
height: 0;
padding-bottom: 80%;
width: 80%;
margin: 10%;
background-color: white;
border: 3px solid #c1c1c1;
text-align: center;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
#c1box:hover {
opacity: 0.5;
}
#column2 {
width: 50%;
min-height: 100%;
background-color: white;
position: fixed;
left: 25%;
top: 0;
border-left-style: solid;
border-right-style: solid;
border-left-width: 20px;
border-right-width: 20px;
border-left-color: #2b3547;
border-right-color: #2b3547;
overflow: auto;
padding-left: 5px;
}
#column2 img {
border: solid grey 2px;
}
#column3 {
width: 25%;
min-height: 100%;
background-color: #e3e2e2;
position: fixed;
left: 75%;
top: 0;
overflow: auto;
margin: 0;
text-align: center;
}
#c3box {
height: 100px;
width: 100%;
float: right;
margin: 5%;
margin-top: 11%;
background-color: white;
padding: 10px;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
color: #0D254F;
display: inline-block;
float: right;
line-height: 1.5em;
border: 3px solid #c1c1c1;
}
#c3box i {
font-size: 12px;
color: #3d5072;
text-decoration: none;
}
#c3box b {
font-size: 14px;
color: #07162f;
font-weight: 700;
}
#c3box h1 {
font-size: 16px;
color: grey;
font-family: 'Pacifico', cursive;
}
#c3box h1::first-letter {
color: #2b3547;
}
#c3box a {
color: white;
background-color: grey;
text-decoration: none;
padding: 3px;
margin-top: 4px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#cbox a:hover {
background-color: black;
}
#c3box:hover {
opacity: 0.5;
width: 80%;
height: 100px;
}
#c3boxcontent {
opacity: 0.9;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .5s;
width: calc(80% - 100px);
height: 100px;
text-align: center;
float: right;
}
#c3box:hover #c3boxcontent {
opacity: 1;
}
#c3box img {
top: 0;
bottom: 0;
margin: auto;
width: 75px;
height: 75px;
}
#nav {
width: 80%;
height: 40px;
margin-left: 10%;
margin-top: 1%;
margin-bottom: 0;
text-align: center;
line-height: 40px;
}
#nav a {
font-size: 13px;
width: 7%;
height: 40px;
margin-left: 1%;
color: grey;
text-decoration: none;
background-color: white;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
border-right: 1px solid #c1c1c1;
}
#nav a:hover {
background-color: grey;
color: white;
border: 0;
}
</style>
<title>Sensational!</title>
</head>
<body>
<div id=container>
<div id=column1>
<div id=c1box>
<h1>Andrew</h1>
<b>male</b><br>
<img src="https://s-media-cache-ak0.pinimg.com/564x/2b/1b/c8/2b1bc8eb8bdb4d8f66ab9c6c0d585350.jpg"><br><br>
<i>Born on the 1st January 2016<br>
White Fur, Long</i>
</div>
<div id=c1box>
<h1>Sheila</h1>
<b>female</b><br>
<img src="https://s-media-cache-ak0.pinimg.com/236x/b5/9f/87/b59f8728480231a869b262c5df1978d9.jpg"><br><br>
<i>Born on the 2nd January 2016<br>
Brown Fur, Long</i>
</div>
<div id=c1box>
<h1>Robyn</h1>
<b>female</b><br>
<img src="http://4.bp.blogspot.com/-ItSusHyhZQU/UOQ47Cw5UqI/AAAAAAAAPcs/aNr8veiERRQ/s1600/Cute-Black-Pomeranian-Puppies-2.jpg"><br><br>
<i>Born on the 29th February 2019<br>
Black Fur, Long</i>
</div>
</div>
<div id=column2>
<div id="nav">
<a href="page1url">Page 1</a>
<a href="page2url">Page 2</a>
<a href="page3url">Page 3 </a>
<a href="page4url">Page 4 </a>
<a href="page5url">Page 5 </a>
<a href="page6url">Page 6 </a>
<a href="page7url">Page 7 </a>
<a href="page8url">Page 8 </a>
</div>
<h2>POMBRAZEN</h2>
<P>
<center>
<B>The Pomeranian Breeder</b>
</center>
</p>
<p>I'll be typing a load of random crap in here, which you can then opt to fill out later on. I hope that works sufficiently - I assumed you'd have your own content to add, that's all. Well anyway there are a call few things that you can do around here to convey for different effects...<br>
<i>Wanna see?</i><br>
<center><img src="https://www.asnclassifieds.com/im/images-433/3225078-1079260_141099326096688_569905636_n.jpg"></center><br>
<p>Well as you can see, <i>images</i> all are given a cute little border around them automatically! <b>AMAZING</b> isn't it? Not really? Well then why not use the link beside to complain about it: <a href="http://www.marapets.com">(jokes this takes you to marapets)</a>.</p>
<p>Because I am lazy I am just gonna copy and paste this all over again. bwahahaha<br></p>
<h1>After this sweet subheading of course.</h1>
<p>I'll be typing a load of random crap in here, which you can then opt to fill out later on. I hope that works sufficiently - I assumed you'd have your own content to add, that's all. Well anyway there are a call few things that you can do around here to convey for different effects...<br>
<i>Wanna see?</i><br>
<center><img src="https://www.asnclassifieds.com/im/images-433/3225078-1079260_141099326096688_569905636_n.jpg"></center><br>
<p>Well as you can see, <i>images</i> all are given a cute little border around them automatically! <b>AMAZING</b> isn't it? Not really? Well then why not use the link beside to complain about it: <a href="http://www.marapets.com">(jokes this takes you to marapets)</a>.</p>
<h1>Ahh - and subtitles. That's always fun!</h1>
<p>Because I am lazy I am just gonna copy and paste this all over again. bwahahaha<br></p>
<h1>After this sweet subheading of course.</h1>
<p>I'll be typing a load of random crap in here, which you can then opt to fill out later on. I hope that works sufficiently - I assumed you'd have your own content to add, that's all. Well anyway there are a call few things that you can do around here to convey for different effects...<br>
<i>Wanna see?</i><br>
<center><img src="https://www.asnclassifieds.com/im/images-433/3225078-1079260_141099326096688_569905636_n.jpg"></center><br>
<p>Well as you can see, <i>images</i> all are given a cute little border around them automatically! <b>AMAZING</b> isn't it? Not really? Well then why not use the link beside to complain about it: <a href="http://www.marapets.com">(jokes this takes you to marapets)</a>.</p>
<h1>Ahh - and subtitles. That's always fun!</h1>
<p>Because I am lazy I am just gonna copy and paste this all over again. bwahahaha<br></p>
</div>
<div id=column3>
<h1>For Sale:</h1>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Sally</h1>
<i>£550</i><br>
<b>SOLD</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
<div id=c3box>
<img src="https://pomeranian-husky.com/wp-content/uploads/2015/08/Pomeranian-Puppy-75x75.jpg">
<div id=c3boxcontent>
<h1>Oscar</h1>
<i>£500</i><br>
<b>AVAILABLE</b><br>
<a href="url here please">View Info</a><br>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
我确实会做一些事情，这可能是问题所在。
确保将所有id标记更改为类。 Id只能使用一次，而类可以根据需要使用 示例CSS：#hello {} to .hello {}
您设置到div的很多位置属性都设置为固定 这会将表固定到浏览器位置而不是相对于其他对象。 位置应该设置为相对或绝对（绝对值更接近固定然后相对。它将对象固定到其父元素中的位置） 示例CSS：.hello {display：fixed;} to .hello {position：absolute;}