视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
求一个css框架_html/css
2020-11-27 15:45:54 责编:小采
文档


页面分三大块头部 中间部分 和底部



要求header 和footer始终固定在屏幕最上方和最下方
main高度不固定,要求垂直方向居中(在header和footer之间垂直居中),内容比较多时,可以出现滚动条。

请各位达人帮忙写下这三个div的css!自己写了几个始终不能达到理想的效果!


回复讨论(解决方案)

这样?没明白main垂直居中什么意思。

页头要求header 和footer始终固定在屏幕最上方和最下方 main高度不固定,要求垂直方向居中(在header和footer之间垂直居中),内容比较多时,可以出现滚动条。
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1 1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1页脚

不兼容ie6-,因为不支持fixed定位,需要用js,懒得写了,你要兼容ie6自己写js

这样?没明白main垂直居中什么意思。



XML/HTML code
?



123456710111213

应为分辨率不同,不同电脑显示的高度是不同的,main的高度就是客户端电脑屏幕除去header 和footer的高度,main中的内容在这个高度内垂直方向居中(上下方向居中)

引用 1 楼 showbo 的回复:这样?没明白main垂直居中什么意思。



XML/HTML code
?



123456710111213


我贴出来的不用管main高度,只要高度超过了就自动出现滚动条,不用计算main的高度就是客户端电脑屏幕除去header 和footer的高度

除非你的滚动条出现在main容器上,而不是浏览器的滚动条,那需要js计算。感觉没这个必要。

引用 3 楼 suncaser 的回复:
引用 1 楼 showbo 的回复:这样?没明白main垂直居中什么意思。



XML/HTML code
?



123456710111213

这个main中的内容没有垂直居中(上下方向居中)

没明白什么叫上下方向居中。。页头和页脚大小不一样而且覆盖在上面,怎么垂直居中。??

没明白什么叫上下方向居中。。页头和页脚大小不一样而且覆盖在上面,怎么垂直居中。??
我想我画个图更直观一些!



这个明白了,得用js来定位了

页头要求header 和footer始终固定在屏幕最上方和最下方 main高度不固定,要求垂直方向居中(在header和footer之间垂直居中),内容比较多时,可以出现滚动条。
1
1
1
1
1
1
1
1
1
1
1
1
页脚

这个明白了,得用js来定位了



XML/HTML code
?



12345671011121314151617181920212223

非常感谢!这个不错!虽然position:fixed;在ie6中不支持!但ie6也就像快要下山的夕阳了!

下载本文
显示全文
专题