页脚不会延伸到 window 的两侧

Question

我正在建立一个网站，但遇到了一个问题。 this page doesn't stretch to the edge of the website, like it does on this page 的页脚。

这是第一页的 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>

Answer 1

在您提供的链接中，在第二页的源代码中，如果您检查 div with id="footer" 包裹在 div with class="wrap" 而在图库页面不是。

并且由于wrap class的宽度是固定的900px，所以footer也是一样的宽度，把footer移到wrap外面就变成了全宽。

希望对您有所帮助。

页脚不会延伸到 window 的两侧

Footer does not stretch to the sides of the window

html

css

footer

web