我正在建设一个网站,我遇到了一个问题。网站的页脚 本页 不像在网站上那样,延伸到网站的边缘。本页.
这是第一页的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 © 2008 − Happy Template − 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>
在你提供的链接中,在第二页的源代码中,如果你检查你的div与 id="footer"
被包裹在一个带有 class="wrap"
而在图库页面上却没有。
而且由于 wrap
类有一个固定的宽度900px,所以页脚也是同样的宽度,只要把页脚移到下面的 wrap
就会变成全宽。
希望能帮到你。