作者gpgpt (深深~*)
看板Web_Design
标题[问题] position:fixed 超出页面就消失
时间Sat Aug 30 16:35:55 2014
我有一个网站版面如下：
┌───────────────┐
│ header │
├───────────────┤
│┌──┐┌─────────┐│
││ ││ ││
││side││ 主要内容 ││
││ ││ ││
││ ││ ││
│└──┘└─────────┘│
└───────────────┘
其中header和side客户都希望可以跟随萤幕下拉，
所以我都使用了position:fixed。
一般时候没有什麽问题，
但如果手机放大浏览超出画面，
就会出状况......
header部分，
靠右边的选单会被裁切掉或整个消失，
且没有卷轴可以把它卷回来。
side则是下面也会消失，
另外会跟「主要内容」重叠。
不知道这样的状况有没有办法可解？尤其是header的部份，
谢谢。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.36.237.216
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1409387759.A.A64.html
1F：→ mmis1000: 用 media query 或 javascript 侦测银幕尺寸 08/30 17:18
2F：→ mmis1000: 然後改变样式 08/30 17:19
3F：推 iamnodoubt: 直觉就是用rwd,有程式码吗?贴出来研究一下 08/30 17:25
我有加<meta name="viewport" content="width=1300">了，
但他的帮助是把我整个底图拉满（首页底是100%的轮播），
还是不会因此出现卷轴。
js不会写，我是视觉设计师orz。
程式码先贴header，看看能不能懂。
<div class="header">
<ul class="pd_nav">
<li><a href="pd_list.html">aaa</a></li>
<li><a href="pd_list.html">bbb</a></li>
<li><a href="pd_list.html">ccc</a></li>
<li><a href="pd_list.html">ddd</a></li>
<li><a href="pd_list.html">eee</a></li>
</ul>
<div class="btn">
<a href="cart_1.html">购物车</a>
<a href="login.html">会员登入</a>
</div>
</div>
－CSS－
.header {
background:rgba(0, 0, 0, 0.8);
position:fixed;
width:100%;
height:60px;
top:0;
min-width:1000px;
overflow:visible;
z-index:999;
}
.pd_nav {
float:left;
}
.btn {
float:right;
}
.pd_nav和.btn的css有部分省略，
因为有点长，都是调尺寸、颜色用，应该不太相关。
感谢～
※ 编辑: gpgpt (114.36.237.216), 08/30/2014 18:07:08
5F：→ iamnodoubt: 会比较清楚,position:absolute跟position:fixed是已经 08/30 20:02
6F：→ iamnodoubt: 跳脱normalflow,你把他当成他们已经在另外一个空间,只 08/30 20:03
7F：→ iamnodoubt: 是看的到来想像,没有左右拉霸是因为在normalflow空间 08/30 20:06
8F：→ iamnodoubt: 没有东西可以造成他有拉霸,你的header他在异次元空间 08/30 20:07
9F：→ iamnodoubt: 右边看不到是因为你设定他min-width,又没bar可以移动 08/30 20:11
10F：→ iamnodoubt: 就变成好像不吃掉一样,下面的资料不足降,欢迎高手指正 08/30 20:12
11F：→ gpgpt: 我懂这个原理，但想知道有没有其他写法可以同时随萤幕下滑 08/31 01:54
12F：→ gpgpt: ，又不会在放大时整个消失 08/31 01:55
13F：推 iamnodoubt: 其实不是很理解你讲的放大,现在新一点的网站都有rwd 08/31 10:48
14F：→ iamnodoubt: 直接用bootsrap或是研究他的css写法,其实不难.. 08/31 10:49
15F：→ KC73: 第一个是，如果要手机也可以看，客户应该要多付钱 08/31 11:17
16F：→ KC73: 第二，简单一点，用 css @media max-width 做一个针对小萤幕 08/31 11:18
17F：→ KC73: 的版型，这样也可以，不会太复杂~ 08/31 11:19
18F：→ KC73: 应该是 min-width 你会比较用到~ 08/31 11:19
19F：→ gpgpt: 的确如KC73所说，要做到RWD客户要有预算，他们并没有， 08/31 16:23
20F：→ gpgpt: 所以我也没意愿整个帮他变形，才会针对这个点来问问看， 08/31 16:24
21F：→ gpgpt: 如果真的不行，就看他们是不考虑手机，或不要用fixed 08/31 16:25
22F：→ gpgpt: 还是很谢谢各位的回答 ^______^ 08/31 16:26
23F：推 GoalBased: 异次元XDD 09/01 08:54