[问题] position:fixed 超出页面就消失

楼主: gpgpt (深深~*)   2014-08-30 16:35:55
我有一个网站版面如下:
┌───────────────┐
│ header │
├───────────────┤
│┌──┐┌─────────┐│
││ ││ ││
││side││ 主要内容 ││
││ ││ ││
││ ││ ││
│└──┘└─────────┘│
└───────────────┘
其中header和side客户都希望可以跟随萤幕下拉,
所以我都使用了position:fixed。
一般时候没有什么问题,
但如果手机放大浏览超出画面,
就会出状况......
header部分,
靠右边的选单会被裁切掉或整个消失,
且没有卷轴可以把它卷回来。
side则是下面也会消失,
另外会跟“主要内容”重叠。
不知道这样的状况有没有办法可解?尤其是header的部份,
谢谢。
作者: mmis1000 (秋月恋枫)   2014-08-30 17:18:00
用 media query 或 javascript 侦测银幕尺寸然后改变样式
作者: iamnodoubt (Have Fun)   2014-08-30 17:25:00
直觉就是用rwd,有程式码吗?贴出来研究一下你可以把你的程式码放到http://jsbin.com/ 之类的地方会比较清楚,position:absolute跟position:fixed是已经跳脱normalflow,你把他当成他们已经在另外一个空间,只是看的到来想像,没有左右拉霸是因为在normalflow空间没有东西可以造成他有拉霸,你的header他在异次元空间右边看不到是因为你设定他min-width,又没bar可以移动就变成好像不吃掉一样,下面的资料不足降,欢迎高手指正
楼主: gpgpt (深深~*)   2014-08-31 01:54:00
我懂这个原理,但想知道有没有其他写法可以同时随萤幕下滑,又不会在放大时整个消失
作者: iamnodoubt (Have Fun)   2014-08-31 10:48:00
其实不是很理解你讲的放大,现在新一点的网站都有rwd直接用bootsrap或是研究他的css写法,其实不难..
作者: KC73 (肯先生)   2014-08-31 11:17:00
第一个是,如果要手机也可以看,客户应该要多付钱第二,简单一点,用 css @media max-width 做一个针对小萤幕的版型,这样也可以,不会太复杂~应该是 min-width 你会比较用到~
楼主: gpgpt (深深~*)   2014-08-31 16:23:00
的确如KC73所说,要做到RWD客户要有预算,他们并没有,所以我也没意愿整个帮他变形,才会针对这个点来问问看,如果真的不行,就看他们是不考虑手机,或不要用fixed还是很谢谢各位的回答 ^______^
作者: GoalBased (Artificail Intelligence)   2014-09-01 08:54:00
异次元XDD

Links booklink

Contact Us: admin [ a t ] ucptt.com