页脚不会延伸到窗口的两侧答案

【问题标题】：Footer does not stretch to the sides of the window页脚不会延伸到窗口的两侧
【发布时间】：2020-10-03 16:33:04
【问题描述】：

我正在建立一个网站，但遇到了一个问题。 this page 的页脚不会像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>

【问题讨论】：

请也包括你的 css :)

标签： html css web footer

【解决方案1】：

在您提供的链接中，在第二页的源代码中，如果您使用 id="footer" 检查您的 div 是否包含在带有 class="wrap" 的 div 中，而在画廊页面上则不是。

由于wrap类的宽度固定为900px，所以footer也是一样的宽度，只要把footer移到wrap之外就变成全宽了。

希望对你有帮助。

【讨论】：