你好，所以我刚刚开始html和css大约一个月后，我正在编辑一个模板，我已经制作了大约6个网页，这个问题只发生在这个特定的网页上，我似乎无法找到任何问题，你们好吗？帮我？ 我的侧边栏似乎正在向右滑到我的页脚，上面的空间是空的，我尝试填充但失败了所以我想知道是否有任何其他方法。 非常感谢，Imma Noob。我没有改变css中的任何内容，对于我的所有其他网页都保持相同，这些都可以正常工作，因此错误必须在这个HTML编码本身。这是我在Stack Overflow中的第一个问题，所以如果我超出界限或做错了，请原谅我!!
我只是想知道如何将我的侧边栏与marqee和联系人一起带到顶部并与文本平行。对不起，如果我犯了错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Swachh Bharat</title>
<meta name="description" content="Description of your site goes here">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page-in">
<div class="page">
<div class="main">
<div class="header">
<div class="header-top">
<h1>Swachh <span>Bharat</span></h1>
</div>
<div class="header-bottom">
<!--h2> Clean India <br>
Green India</h2-->
</div>
<div class="topmenu">
<ul>
<li style="background: transparent none repeat scroll 0% 50%; -moz-
background-clip: initial; -moz-background-origin: initial; -moz-background-
inline-policy: initial; padding-left: 0px;"><a href="index.html">
<span>Home</span></a></li>
<li><a href="namami.html"><span>Namami gange</span></a></li>
<li><a href="pm.html"><span>P.M. Vision</span></a></li><!--
used for spacing -->
<li><a href="ob.html"><span>Objectives</span></a></li>
<li><a href="ach.html"><span>Achivements</span></a></li>
<li><a href="odf.html"><span>ODF</span></a></li>
</ul>
</div>
</div>
<img src="images/copyright.gif" class="copyright"
alt="http://www.usaonlinecasinos.org"></a>
<div class="content">
<div class="content-left">
<div class="row1">
<h1 class="title">OD<span>F</span></h1>
<video width="600" controls autoplay>
<source src="images\odf.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<br>
<p>
</div>
<div class="row"><br></div><br>
<h2 class="subtitl">Open Defecation : <span>The Bane of India</span></h2>
<div style="background-color: #efedea;padding: 20px;border-radius: 20px" >
<p><strong>October 2, Gandhi Jayanti,</strong> will mark the third
anniversary of the Swachh Bharat Mission (SBM). India’s inability to root
out open defecation has been connected to infant deaths, high incidence of
diarrhoeal diseases and stunting<br><br>
<ol><li>When Swachh Bharat Mission was launched there were 550 million
people practising open defecation (OD). That number, is down to 300 million.
So 250 million no longer practice OD. That is a population almost equivalent
to Indonesia. Over 2.5 lakh villages and 204 districts have become open
defecation free (ODF).<br><br><li>We have two years to achieve the prime
minister’s October 2, 2019, target. There is an accelerated momentum in the
past 15 months. Earlier focus was on toilet construction but SBM is about
behavioural change and usage of toilets. Five states are already ODF. 10-11
states will declare themselves ODF by March 2018. So FY17-18 will give a big
boost.</li> <br><li>Water and sanitation go hand in hand. One policy
decision is to provide piped water supply to all ODF villages. From
technology standpoint, the rural toilet pan has a steep slope pan which
requires less water to flush than the urban pan.</li><br><li>
Rural pan, typically, requires only 1.5 litres of water against 4-5 litres
for urban pan. Though no piped water supply is a hassle, a hand pump or
water source nearby can address the water requirement. Out of 2.45 lakh ODF
villages, 1.5 lakh have piped water supply. Most of these are public
standposts (tapstands). Household connections are just 16%. But some states
like Gujarat, Kerala, Punjab are already focussing on household connections.
ODF villages will get piped water supply on priority and this is an
additional incentive to become ODF.</li></li></ol>.</p>
</div></div>
</div>
</div>
<div class="content-right">
<div class="mainmenu">
<h2 style="height:50px" class="sidebar1">News</h2>
<marquee height="250px" direction="up">
<li>The Name and Shame Campaign: Time to End Open Defecation</li><br>
<li>1,000 Gandhis, Lakh Modis Can't Clean India. 125 Crore Indians Can, Says
P.M.Narendra Modi</li><br>
<li>Tourists Can Now Complain About Garbage Around Monuments On 'Swachh
Paryatan' App</li>
<li>Union Budget 2016: 'Swachh Bharat Abhiyan' gets Rs 11,300 crore</li><br>
<li>Democracy can't function at whims and fancies of anyone: PM Modi</li>
<br>
<li>Government plans to give legal teeth to PM Modi's 'Swachh Bharat
Abhiyan'</li><br>
<li>'Swachh Bharat sentinels' fight open defecation</li><br>
</marquee>
</div><div class="contact">
<h2 class="sidebar2">Contact</h2>
<div class="contact-detail">
<p class="green"><strong>For Swachhta related queries, Contact:</strong></p>
<p><strong>Address :</strong> Your conscience and Your clean heart.<br>
Look Deep and find Your Calling</p>
<p><strong>E-mail :</strong> KartikeyGaur@SwachhBharat.com
took a</p>
<p><strong>Phone :</strong> Delhi-011-27011234<br>
Mumbia-022-24011234</p>
</div>
</div>
</div>
</div>
<div class="footer">
<p>© Designed by KartikeyBusinessSolutions<a target="_blank"
href="http://www.KartikeyBusinessSolutions.com"></a>
</p>
<ul>
<li style="border-left: medium none;"><a href="index.html"><span>Home</span>
</a></li>
<li><a href="namami.html"><span>Namami Gange</span></a></li>
<li><a href="pm.html"><span>P.M. Vision</span></a></li>
<li><a href="ob.html"><span>Objectives</span></a></li>
<li><a href="ob.html"><span>Achivements</span></a></li>
<li><a href="odf.html"><span>ODF</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body></html>
这是css文件
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #4d5051;
background-color: #d6d6d6;
background-image: url(../images/top-rept.jpg);
background-repeat: repeat-x;
background-position: left top;
margin: 0px;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
padding: 0px;
margin: 0px;
}
a {
color: #072FCF;
text-decoration: underline;
}
a:hover {
color: #072FCF;
text-decoration: none;
}
.page-in {
background-image: url(../images/bottom-rept.jpg);
background-repeat: repeat-x;
background-position: left bottom;
width: 100%;
float: left;
}
.page {
width: 1000px;
margin: 0px auto;
}
.main, .header {
width: 1000px;
float: left;
}
.header-top {
background-image: url(../images/header-top.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 1000px;
height: 81px;
float: left;
}
.header-top h1 {
font-family: "Times New Roman", Times, serif;
font-size: 55px;
font-weight: normal;
line-height: 81px;
color: #FFFFFF;
margin-left: 115px;
}
.header-top h1 span {
color: #000000;
}
.header-bottom {
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 1000px;
height: 257px;
float: left;
}
.header-bottom h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #000000;
margin-top: 92px;
margin-left: 27px;
}
.topmenu {
background-image: url(../images/menu-bg.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 1000px;
height: 74px;
float: left;
}
.topmenu ul {
height: 74px;
margin-left: 64px;
list-style-type: none;
}
.topmenu ul li {
background-image: url(../images/devider.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 74px;
float: left;
padding-right: 13px;
padding-left: 13px;
}
.topmenu ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 74px;
color: #FFFFFF;
text-decoration: none;
display: block;
height: 74px;
float: left;
padding-left: 15px;
}
.topmenu ul li a span {
display: block;
height: 74px;
float: left;
padding-right: 35px;
cursor: pointer;
}
.topmenu ul li a:hover {
background-image: url(../images/menu-left.jpg);
background-repeat: no-repeat;
background-position: left top;
color: #000000;
}
.topmenu ul li a:hover span {
background-image: url(../images/menu-right.jpg);
background-repeat: no-repeat;
background-position: right top;
color: #000000;
}
.content {
background-color: #FFFFFF;
background-image: url(../images/body-top.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 952px;
float: left;
padding: 30px 24px 0px 24px;
}
.content-left {
background-image: url(../images/vline.jpg);
background-repeat: repeat-y;
background-position: right top;
width: 621px;
float: left;
padding-right: 21px;
}
.row1 {
width: 621px;
float: left;
}
.title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: normal;
color: #000000;
margin-bottom: 30px;
}
.title span {
color: #82ab01;
}
.copyright {
border: 0px;
height: 1px;
width: 1px;
}
ul.list1 {
margin-top: 5px;
margin-left: 25px;
list-style-image: url(../images/bullet.jpg);
}
ul.list1 li {
padding-top: 3px;
padding-bottom: 3px;
}
.row2 {
background-image: url(../images/section-bg.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 591px;
height: 233px;
float: left;
padding: 15px 15px 0px 15px;
}
.subtitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #171817;
margin-bottom: 10px;
}
.subtitle span {
color: #607e00;
}
a.more {
font-size: 12px;
line-height: 30px;
color: #282828;
text-decoration: none;
background-image: url(../images/more-btn.jpg);
background-repeat: no-repeat;
background-position: left top;
text-align: center;
display: block;
width: 83px;
height: 38px;
margin-top: 10px;
}
a.more:hover {
color: #607e00;
}
.content-right {
width: 310px;
float: right;
padding-top: 7px;
}
.mainmenu, .contact {
width: 310px;
float: right;
}
.sidebar1 {
font-size: 18px;
line-height: 50px;
color: #FFFFFF;
background-image: url(../images/sidebar1.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 50px;
padding-left: 60px;
margin-bottom: 15px;
}
.mainmenu ul {
margin-bottom: 15px;
list-style-type: none;
}
.mainmenu ul li {
background-image: url(../images/bullet.jpg);
background-repeat: no-repeat;
background-position: left center;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
.mainmenu ul li a {
font-size: 12px;
font-weight: bold;
color: #000000;
text-decoration: underline;
}
.mainmenu ul li a:hover {
text-decoration: none;
}
.sidebar2 {
font-size: 18px;
line-height: 50px;
color: #FFFFFF;
background-image: url(../images/sidebar2.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 50px;
padding-left: 60px;
margin-bottom: 10px;
}
.contact-detail {
background-color: #dcdcdc;
width: 280px;
float: right;
padding: 15px;
}
.contact-detail p {
margin-bottom: 10px;
}
.green {
color: #003300;
}
.footer {
line-height: 69px;
background-image: url(../images/footer.jpg);
background-repeat: no-repeat;
background-position: left top;
width: 952px;
height: 69px;
float: left;
padding: 23px 24px 0px 24px;
}
.footer p {
font-size: 11px;
color: #FFFFFF;
float: left;
}
.footer a {
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover {
text-decoration: none;
}
.footer ul {
float: right;
}
.footer ul li {
display: inline;
padding-right: 10px;
padding-left: 10px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
.footer ul li a {
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
}
.footer ul li a:hover {
text-decoration: underline;
}