窗脚不能延伸到窗户的两侧

问题描述 投票:0回答:1

我正在建设一个网站,我遇到了一个问题。网站的页脚 本页 不像在网站上那样,延伸到网站的边缘。本页.


这是第一页的HTML,页脚显示不正确。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css/main.css" type="text/css" />
        <title>ItsBabylicious.com - cute soft embroidered baby blankets & other embroidery</title>
    </head>

    <body>
        <div class="wrap">
            <h1 id="logo"><a href="#">Itsbabylicios.com<br /></a></h1>
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="https://www.etsy.com/search?q=hebrew%20baby%20blaket">Store</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <div class="row">
                <div id="text" class ="column" style ="width:%100">
                    <h2>Baby gifts and embroidery </h2>
                    <p>Here at Babylicous.com we sell baby blankets. The Yummy type that babys just want to rub on their face.</p>
                    <p>Babylicious blankets are special. Each balnket is embroidered to your custom order.  <a href="#">in over 40 colors</a> if you want a blanket truly special <a href="#">contact us</a> as we are a fully custom embroidery shop that aims to please</p>
                </div>
                <div class="column" style="width:%100">
                    <img src="custom name on baby blanket.jpg" alt="Cutest Baby blanket pic ever!" style="max-width: 100%;border-radius: 8px">
            </div>

            <div id="green_bubble">
                <p><a href="https://www.etsy.com/search?q=hebrew%20baby%20blaket" title="etsy shop devoted to hebrew baby blankets">check out our new etsy shop</a>
            </div>
        </div>

    <!-- Generated by https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections -->

    <div style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M0.00,49.98 C149.99,150.00 349.20,-49.98 500.00,49.98 L500.00,150.00 L0.00,150.00 Z" style="stroke: none; fill: #FF99CB;"></path></svg></div>

        <div id="footer">
            <div class="wrap">
                <div id="bubble"><p>We are located in Lakewood NJ 08701 just give us a call 732 305 0260</p></div>
                <div id="copyright">
                    <p>Copyright &copy; 2008 &minus; Happy Template &minus; Design: Luka Cvrk, <a title="Awsome Web Templates" href="http://www.solucija.com/">Solucija</a></p>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </body>
    </html>
html css web footer
1个回答
1
投票

在你提供的链接中,在第二页的源代码中,如果你检查你的div与 id="footer" 被包裹在一个带有 class="wrap" 而在图库页面上却没有。

而且由于 wrap 类有一个固定的宽度900px,所以页脚也是同样的宽度,只要把页脚移到下面的 wrap 就会变成全宽。

希望能帮到你。

© www.soinside.com 2019 - 2024. All rights reserved.