作者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/m.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