我有一个div id =＆＃34; rightsection＆＃34;这是通过我的页脚。我一直试图弄清楚如何在整天搜索和测试中修复此错误。任何帮助将不胜感激。
这是我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Bike the Mountains Tour</title>
<script src="modernizr-1.5.js"></script>
<link href ="mw_styles.css" rel = "stylesheet" type ="text/css">
</head>
<body>
<div id="pageheader">
<header>
<h1><img src="mwlogo.png" alt="Mountain Wheels" /></h1>
</header>
</div>
<div id ="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Learn More</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Route Maps</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Lodging</a></li>
<li><a href="#">Meals</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Equipment</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="articleheader">
<header>
<h1 >Bike the Mountains Tour</h1>
</header>
</div>
<div id="leftsection">
<section>
<p>
The Bike the Mountains Tour rises from the town of Littleton,
Colorado and explores the Colorado Front Range. Our tour
crosses the Continental Divide twice, giving you the
opportunity to bike the highest paved roads in the
United States. This tour is a classic showcase of Colorado's
Rocky Mountain scenery.
</p>
<blockquote>
<p>
The Bike the Mountains Tour is <i>amazing</i>. I highly
recommend it and would gladly return.
</p>
<cite>— Steve H.</cite>
</blockquote>
<p>
Not designed for the weekend cyclist, this tour is offered
only for those fit enough to ride high mountain passes. We
provide sag wagons and support. Your lodging and meals are
also part of the registration fee.
We guarantee tough climbs, amazing sights, sweaty jerseys,
and lots of fun.
</p>
<p>
This is the seventh year we've offered the Bike the Mountains
Tour. It is our most popular tour and riders are returning
again and again. Our experienced tour leaders will be there
to guide, help, encourage, draft, and lead you
every stroke of the way. Come join us!
</p>
</section>
</div>
<div id="rightsection">
<section>
<h1>Itinerary</h1>
<h2>Day 1</h2>
<p>
We start from the foothills above Littleton, Colorado,
promptly at 9am. The first day is a chance to get
your legs in shape, test your gearing, and prepare for
what's to come.
</p>
<h2>Day 2</h2>
<p>
Day 2 starts with a climb up Bear Creek Canyon to Lookout
Mountain, followed by a swift and winding descent into the
town of Golden. Refresh yourself at the famous Coors Brewery.
</p>
<h2>Day 3</h2>
<p>
Day 3 takes you along the Peak to Peak Highway. This
55-mile route showcases the mountains of the Front Range,
providing amazing vistas from Golden Gate Canyon State Park
to Rocky Mountain National Park.
</p>
<h2>Day 4</h2>
<p>
Now for the supreme challenge: Day 4 brings some real
high-altitude cycling through Rocky Mountain National Park
and up Trail Ridge Road. It's an amazing ride, high above
timberline, topping out at over 11,000 feet.
</p>
<h2>Day 5</h2>
<p>
We start Day 5 on the west side of the Continental Divide.
From Grand Lake, you'll bike to Winter Park and then over
Berthoud Pass, and back to the eastern side of
the Continental Divide.
</p>
<h2>Day 6</h2>
<p>
On Day 6 we ride
back to Littleton over Squaw Pass and Bear Creek and then
enjoy a celebratory dinner as we share memories of a great
tour.
</p>
</section>
</div>
<div id= "footer">
<hr>
<footer>
<address>
Mountain Wheels •
Littleton, CO 80123 •
(303) 555 - 5499
</address>
</footer>
</hr>
</div>
</body>
</html>
这是我的css：
html
{
position: relative;
min-height: 100%;
}
body
{
font-family:Tahoma, Geneva, sans-serif;
margin: 0 0 0px;
}
#pageheader
{
width: 100%;
}
#articleheader
{
font-size: 18px;
font-weight: normal;
letter-spacing: 7px;
text-align: center;
}
#nav
{
background-color: rgb(125,120,89);
line-height: 3em;
width: 10%;
float:left;
}
#nav ul
{
list-style-type: none;
}
#nav ul li:hover
{
background-color: rgb(131, 121, 36);
list-style-image: url(wheelmarker.png);
color: yellow;
color: rgba(255, 255, 255, 100%);
}
#nav ul li a
{
color: white;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
#leftsection
{
float:left;
width: 500px;
padding: 10px;
}
#leftsection section p
{
font-size: 22px;
}
#leftsection section p:first-of-type:first-line
{
text-transform: uppercase;
}
#leftsection blockquote
{
width: 50%;
background-color: rgb(131, 121, 36);
color: white;
font-size: 16px;
font-family: Comic Sans MS, Times;
border-radius: 1em;
box-shadow: 10px 10px 5px #888888;
float: right;
}
#leftsection blockquote p
{
padding:5px;
font-size: 16px;
font-family: Comic Sans MS, Times;
}
#leftsection blockquote p:before
{
content:open-quote;
}
#leftsection blockquote p:after
{
content:close-quote;
}
#rightsection
{
float: left;
width: 200px;
padding-right: 100px;
}
#rightsection h1
{
font-size: 22px;
letter-spacing: 3px;
font-weight: normal;
text-align: center;
}
#rightsection h2
{
font-size: 18px;
font-weight: normal;
text-align: right;
}
#rightsection p
{
font-size: 14px;
text-align: justify;
color: gray;
}
#footer
{
clear: both;
width: 100%;
position: absolute;
height: 100px;
clear: both;
bottom: 0;
}
#footer footer address
{
font-size: 16px;
font-style: normal;
text-align: center;
}
答案 0 :(得分：2)
使#footer位置相对而不是绝对。
位置absolute使元素相对于其第一个定位（非静态）祖先元素定位。
位置relative使元素相对于其正常位置
#footer
{
clear: both;
width: 100%;
/* position: absolute; This is before */
position: relative; /* MODIFICATION */
height: 100px;
clear: both;
bottom: 0;
}
这是一个有效的小提琴 https://jsfiddle.net/1s10qsry/
答案 1 :(得分：0)
看起来你希望#rightsection和#leftsection彼此相邻。你需要将它们包装在自己的包含div中。我在这里使用了<main>标记：
https://jsfiddle.net/n1vm9pah/1/
编辑：这仅在视口宽度大于浮动div的宽度时才有效。我会把padding-right:100px放在#rightsection上以帮助解决这个问题（小提琴更新）。