我要投稿

层自动适应高度

Nice CSS/HTML

2022-04-15 0 721

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”><head><title></title><style type=”text/css”> body { font:12px Tahoma;margin:0px;text-align:center; } a:link,a:visited {font-size:12px;text-decoration:none;} a:hover{} /*页面层容器*/ #container { width:780px;margin:0px auto;background:#fff } /*页面头部*/ #header {background:url(logo.gif) no-repeat;} #banner { background:url(banner.jpg) 0px no-repeat; /*加入背景图片*/;background:#999; width:780px; /*设定层的宽度*/ margin:auto; /*层居中*/ height:200px; /*设定高度*/ border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ clear:both /*清除浮动*/ } #pagebody { width:780px; /*设定宽度*/ margin:0px auto; /*居中*/ background:#000 } #sidebar { width:200px; /*设定宽度*/ text-align:left; /*文字左对齐*/ float:left; /*浮动居左*/ background:#f3c;color:#666 overflow:hidden; /*超出宽度部分隐藏*/ height:300px; padding:0px } #mainbody { width:580px; text-align:left; margin:0px auto; /*居中*/ float:right; overflow:hidden; color:#fff } /*页面底部*/ #footer{ width:780px;margin:0 auto;height:65px;background:#999;repeat-x;color:#ff0066;clear:both; } </style></head><body> <div id=container></div> <div id=header> <div id=banner></div></div> <div id=pagebody> <div id=sidebar><h2>这一层需要与右边的层同步,也需要自适应高度</h2></div> <div id=mainbody><h2>想使这一层自动适应高度,有办法吗?</h2></div> <div style=”clear:both;height:1px;margin-bottom:-1px;padding:0; background:#FF0000″></div> </div> <div id=footer>这一层不变</div></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

收藏 (0) 点赞 (0)

免责声明：
1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。不得使用于非法商业用途，不得违反国家法律。否则后果自负！

2、本站信息来自网络，版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
如果您喜欢该程序，请支持正版源码、软件，购买注册，得到更好的正版服务。
如有侵犯你版权的，请邮件与我们联系处理（邮箱:skknet@qq.com），本站将立即改正。

NICE源码网 CSS/HTML 层自动适应高度 https://www.niceym.com/14163.html

Nice

上一篇：滚动条效果

下一篇：让2个DIV居中并排显示

微信