个人中心
gpt4 book ai didi

html - 部分文本通过 html/Css 上的页脚

转载 作者：太空宇宙 更新时间：2023-11-04 02:36:39 25 4
gpt4 key购买 nike

我有一个 div id= "rightsection"穿过我的页脚。我一直在试图找出如何解决这个错误一整天的搜索和测试。任何帮助将不胜感激。

这是我的 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>&mdash; 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 &nbsp;&bull;&nbsp;
                        Littleton, CO 80123 &nbsp;&bull;&nbsp;
                        (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;
}

最佳答案

使 #footer 位置相对而不是绝对。

Position absolute 使元素相对于其第一个定位(非静态)祖先元素定位。

Position relative 使元素相对于其正常位置定位

#footer
 {
    clear: both;
    width: 100%;
   /* position: absolute; This is before */
    position: relative; /* MODIFICATION */
    height: 100px;
    clear: both;
    bottom: 0;


}

这是一个有效的 fiddle https://jsfiddle.net/1s10qsry/

关于html - 部分文本通过 html/Css 上的页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35544327/

25 4 0
文章推荐： html - 如何去除 div 标签周围的白边？
文章推荐： node.js - 在 ec2 上安装 npm 返回 127 错误
文章推荐： javascript - Express.js : capture generic routes with numeric Id
文章推荐： c - printf/sprintf 疯狂(自发串联)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com