css底部通栏设计（效果如图） 怎么做，绝对定位的话，子页面无法实现，求指教 ，要有例子可以发一个

Posted 2023-03-07

现在我的布局是
<div id="topbg"> 100%
<div id="contaner"> 980px
<div id="top"></div>
<div id="main"></div>
<div id="footer"></div> 100%只能是980px
</div>
<div id="footer"></div> /* 如果放这，又不好定位，求解决办法
</div>

参考技术A 最下面的div可以不做定位，这样div曾会按正常顺序排列，始终在底部。宽度设置100%
<div>横幅</div>
<div>内容</div>
<div>底部横幅</div>
==底部横幅是嵌套的，外层：宽100%，居中，背景横向平铺；内层：宽980，高度固定
其实，这个顶部横幅也是嵌套的，不然没效果

100%宽度的意义是使页面适应所有浏览器的宽度，很重要 参考技术B 您好，这个不需要绝对定位，
1，布局如下
<div id="foot">
<div id="foot_980"></div>

</div>
2，css如下
#foot width:100%; height:高度/*如果有背景图片的话。截取两像素，背景图片平铺就可以了*/
#foot_980 width:980px; height:高度/*这里的宽度是网页主宽度，一般960,980都有，根据设计图，有背景的话，平铺背景就可以了*/
希望可以帮到你 参考技术C <div id="footer">
<div class="footer_wrap">
这里是底部内容
</div>
</div>
<style type="text/css">
#footer width:100%; height:139px;
.footer_wrap width:1000px; margin-left:auto; margin-right:auto;
</style>

这样一来，#footer是100%的宽度，平铺顶部背景图片就可以了。.footer_wrap 则是文字的宽度，按照正常的方式布局就可以了。追问

现在我的布局是
100%
980px

100%只能是980px

/* 如果放这，又不好定位，求解决办法

追答

给你推荐一个结构
/* 这里可以随时调整宽度，一般可以100%，这样方便进行头部背景添加 */
/* 这里就是文字页面的宽度，例如1000px */
头部信息

主要信息

底部信息

这样随便哪个版块都可以轻松添加背景了，只要.footer_wrap左右居中就可以了

本回答被提问者采纳 参考技术D <div id="contaner" style="margin-bottom: 80px;"></div>
<div id="footer" style="position: fixed; bottom: 0px; height: 80px;"></div>就可以了

不过需要注意它必须被指定高度，不然它和contaner会冲突。 第5个回答  2013-03-12 <div id="footer"><!-- 背景放这里100% -->
<div id="foot_in">980px居中</div><!-- 文字放这里 -->

</div>