[問題] position:fixed 超出頁面就消失

[gpgpt (深深~*)]

我有一個網站版面如下：

┌───────────────┐
│            header            │
├───────────────┤
│┌──┐┌─────────┐│
││    ││                  ││
││side││     主要內容     ││
││    ││                  ││
││    ││                  ││
│└──┘└─────────┘│
└───────────────┘

其中header和side客戶都希望可以跟隨螢幕下拉，
所以我都使用了position:fixed。

一般時候沒有什麼問題，
但如果手機放大瀏覽超出畫面，
就會出狀況......

header部分，
靠右邊的選單會被裁切掉或整個消失，
且沒有捲軸可以把它捲回來。

side則是下面也會消失，
另外會跟「主要內容」重疊。

不知道這樣的狀況有沒有辦法可解？尤其是header的部份，
謝謝。













--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.36.237.216
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1409387759.A.A64.html
→ mmis1000: 用 media query 或 javascript 偵測銀幕尺寸
→ mmis1000: 然後改變樣式
推 iamnodoubt: 直覺就是用rwd,有程式碼嗎?貼出來研究一下
我有加<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
推 iamnodoubt: 你可以把你的程式碼放到http://jsbin.com/ 之類的地方
→ iamnodoubt: 會比較清楚,position:absolute跟position:fixed是已經
→ iamnodoubt: 跳脫normalflow,你把他當成他們已經在另外一個空間,只
→ iamnodoubt: 是看的到來想像,沒有左右拉霸是因為在normalflow空間
→ iamnodoubt: 沒有東西可以造成他有拉霸,你的header他在異次元空間
→ iamnodoubt: 右邊看不到是因為你設定他min-width,又沒bar可以移動
→ iamnodoubt: 就變成好像不吃掉一樣,下面的資料不足降,歡迎高手指正
→ gpgpt: 我懂這個原理，但想知道有沒有其他寫法可以同時隨螢幕下滑
→ gpgpt: ，又不會在放大時整個消失
推 iamnodoubt: 其實不是很理解你講的放大,現在新一點的網站都有rwd
→ iamnodoubt: 直接用bootsrap或是研究他的css寫法,其實不難..
→ KC73: 第一個是，如果要手機也可以看，客戶應該要多付錢
→ KC73: 第二，簡單一點，用 css @media max-width 做一個針對小螢幕
→ KC73: 的版型，這樣也可以，不會太複雜~
→ KC73: 應該是 min-width 你會比較用到~
→ gpgpt: 的確如KC73所說，要做到RWD客戶要有預算，他們並沒有，
→ gpgpt: 所以我也沒意願整個幫他變形，才會針對這個點來問問看，
→ gpgpt: 如果真的不行，就看他們是不考慮手機，或不要用fixed
→ gpgpt: 還是很謝謝各位的回答 ^______^
推 GoalBased: 異次元XDD