页面无法识别正文中div内的文本和图像。文本/图像位于底部的页面之外。如果缩小，它们是可见的。我尝试添加滚动条，但滚动条不会滚动，因为它无法识别任何已经超出页面的内容。
由于无法识别div中的内容，因此应位于页面底部的页脚最终会像标题一样位于顶部。
/* PARTS OF THE PAGE */
body
{
background-color: #f2f2f2;
margin: 0px;
}
.sidebar {
background-image: url(http://images.all-free-download.com/images/graphiclarge/blurred_golden_background_192849.jpg);
height: 100%;
width: 400px;
border-right: 2px solid #ddd;
position: fixed;
background-repeat: repeat-y;
}
.maintext {
margin-left: 450px;
width: 600px;
padding: 0px 50px 10px 50px;
position: absolute;
overflow: visible;
}
footer {
padding: 10px;
position: relative;
background-color: red;
}
/* TEXT */
h1 {
text-align: center;
height: 30px;
font-family: 'Imprint MT Shadow';
font-weight: 100;
font-size: 50px;
padding-bottom: 20px;
letter-spacing: 20px;
color: #fff7e6;
text-shadow: 0px 1px 2px #706b51;
}
h2 {
text-align: center;
font-family: 'Century Gothic';
letter-spacing: 10px;
padding-top: 10px;
font-weight: 200;
}
p {
letter-spacing: 2px;
font-size: 12px;
font-family: Calibri;
padding-left: 10px;
padding-right: 10px;
}
.maintext p {
padding-left: 30px;
padding-right: 30px;
}
.quote {
background-color: gray;
margin: 0px 90px 0px 90px;
}
ul#menu li{
display: inline;
letter-spacing: 1px;
border-left: 1px solid #706b51;
padding-right: 40px;
padding-left: 5px;
font-size: 11px;
font-family: Candara;
color: #706b51;
}
hr {
margin: -10px 80px -10px 80px;
color: #eee;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="archive.css" />
<title>title</title>
</head>
<body>
<div class="sidebar">
<div class="maintext">
<!-----------------The menu -------------------->
<h1> header 1 </h1>
<hr />
<center>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<hr />
</center>
<!------------------The post ------------------->
<h2> Title 2 </h2>
<p class="quote"> This is a block with quote.</p>
<p> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom. <br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom. <br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
</p>
</div>
</div>
</body>
<footer> <p> This is the footer. The page does not recognize any of the content within the body, so this ends up right at the top of the page. <b> JOY </b> </p></footer>
</html>
答案 0 :(得分：1)
通过对侧边栏和主文字使用fixed和absolute定位，您可以将这些内容从页面流中移除 - 即，您已经所有内容流出，所以除了页脚之外没有任何东西留在流程中，所以没有什么可以滚动。
只需删除CSS中的位置，即
.sidebar {
[...]
position: fixed; /* <- remove this */
}
.maintext {
[...]
position: absolute; /* <- remove this */
}
因为你已经从流程中取出了所有的内容所以除了页脚之外没有任何内容实际留在流程中，这就是它出现在顶部的原因。修复上述问题将解决该问题。
注意：另外，正如评论中所述，任何内容都不应位于结尾</body>标记之外，因此请将您的页脚移到body元素中
工作代码段
/* PARTS OF THE PAGE */
body {
background-color: #f2f2f2;
margin: 0px;
}
.sidebar {
background-image: url(http://images.all-free-download.com/images/graphiclarge/blurred_golden_background_192849.jpg);
height: 100%;
width: 400px;
border-right: 2px solid #ddd;
background-repeat: repeat-y;
}
.maintext {
margin-left: 450px;
width: 600px;
padding: 0px 50px 10px 50px;
overflow: visible;
}
footer {
padding: 10px;
position: relative;
background-color: red;
}
/* TEXT */
h1 {
text-align: center;
height: 30px;
font-family: 'Imprint MT Shadow';
font-weight: 100;
font-size: 50px;
padding-bottom: 20px;
letter-spacing: 20px;
color: #fff7e6;
text-shadow: 0px 1px 2px #706b51;
}
h2 {
text-align: center;
font-family: 'Century Gothic';
letter-spacing: 10px;
padding-top: 10px;
font-weight: 200;
}
p {
letter-spacing: 2px;
font-size: 12px;
font-family: Calibri;
padding-left: 10px;
padding-right: 10px;
}
.maintext p {
padding-left: 30px;
padding-right: 30px;
}
.quote {
background-color: gray;
margin: 0px 90px 0px 90px;
}
ul#menu li {
display: inline;
letter-spacing: 1px;
border-left: 1px solid #706b51;
padding-right: 40px;
padding-left: 5px;
font-size: 11px;
font-family: Candara;
color: #706b51;
}
hr {
margin: -10px 80px -10px 80px;
color: #eee;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="archive.css" />
<title>title</title>
</head>
<body>
<div class="sidebar">
<div class="maintext">
<!-----------------The menu -------------------->
<h1> header 1 </h1>
<hr />
<center>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<hr />
</center>
<!------------------The post ------------------->
<h2> Title 2 </h2>
<p class="quote"> This is a block with quote.</p>
<p> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom. <br> Some more text here. The scrolling doesn't work, page doesn't recognize this as
content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this
as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the
bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize
this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from
the bottom. <br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't
recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the
page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page
doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside
the page from the bottom.<br> Some more text here. The scrolling doesn't work, page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br> Some more text here. The scrolling doesn't work,
page doesn't recognize this as content. So if this text is looooong it will go outside the page from the bottom.<br>
</p>
</div>
</div>
<footer>
<p> This is the footer. The page does not recognize any of the content within the body, so this ends up right at the top of the page. <b> JOY </b> </p>
</footer>
</body>
</html>