CSS n HTML结构是我在此处附加的图像.
我希望页脚位于页面底部,内容区域在增长时应将页脚向下推.但是如果没有内容,内容区域应该直到页脚.
实际上内容区域来自页眉和页脚区域.
我不知道我的结构是否正确.
<HTML xmlns="http://www.w3.org/1999/xhtml"> <head><style>HTML,body { height:100%;}body { background: #EBEBEB; margin: 0px; padding: 0px;}#wrapper { wIDth:100%; height:100%; margin: 0 auto; position:relative;}#header { wIDth:100%; height:147px; background:#999; border-bottom:solID 5px #ddd; position:absolute;}#footer { bottom:0; wIDth:100%; height:170px; position:absolute; background-color:#ccc; border-top:solID 5px #ddd;}#contentArea { wIDth:300px; max-height:100%; position:absolute; z-index:999; left:0; right:0; top:0; bottom:0; margin-left:auto; margin-right:auto; margin-top:120px; margin-bottom:100px; background:#FFF; border:solID 1px red;}</style</head><body><div ID="wrapper"> <div ID="header">header</div> <div ID="footer">footer</div> <div ID="contentArea"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centurIEs,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div></div></body></HTML> 检查代码here.
解决方法 你可以使用magrin！和建议：使用postition：relative;为您的主要部分！
<HTML> <head> <style> *{ Font-family:"Trebuchet MS",Helvetica,sans-serif; text-align:center; } #header,#footer{ position:relative; height:150px; background:#ccc; border:solID 1px #bbb; } #footer{ bottom:0; } #body{ position:relative; margin-top:-50px; margin-bottom:-50px; min-height:250px; background:#aaa; wIDth:70%; margin-right:auto; margin-left:auto; padding:50px 15px; Box-shadow:0px 0px 10px 1px #aaa; border:solID 1px #999; opacity:0.92; z-index:999; } </style> </head> <body> <div ID='header'> header </div> <div ID='body'> BODY </div> <div ID='footer'> FOOTER </div> </body></HTML> http://jsfiddle.net/mostafaznv/2zfjc/
总结以上是内存溢出为你收集整理的html – CSS位置绝对内容区域不增长全部内容，希望文章能够帮你解决html – CSS位置绝对内容区域不增长所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）