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

看板Web_Design作者 (深深~*)時間11年前 (2014/08/30 16:35), 11年前編輯推噓4(4019)
留言23則, 5人參與, 最新討論串1/1
我有一個網站版面如下: ┌───────────────┐ │ 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

08/30 17:18, , 1F
用 media query 或 javascript 偵測銀幕尺寸
08/30 17:18, 1F

08/30 17:19, , 2F
然後改變樣式
08/30 17:19, 2F

08/30 17:25, , 3F
直覺就是用rwd,有程式碼嗎?貼出來研究一下
08/30 17:25, 3F
我有加<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

08/30 20:01, , 4F
你可以把你的程式碼放到http://jsbin.com/ 之類的地方
08/30 20:01, 4F

08/30 20:02, , 5F
會比較清楚,position:absolute跟position:fixed是已經
08/30 20:02, 5F

08/30 20:03, , 6F
跳脫normalflow,你把他當成他們已經在另外一個空間,只
08/30 20:03, 6F

08/30 20:06, , 7F
是看的到來想像,沒有左右拉霸是因為在normalflow空間
08/30 20:06, 7F

08/30 20:07, , 8F
沒有東西可以造成他有拉霸,你的header他在異次元空間
08/30 20:07, 8F

08/30 20:11, , 9F
右邊看不到是因為你設定他min-width,又沒bar可以移動
08/30 20:11, 9F

08/30 20:12, , 10F
就變成好像不吃掉一樣,下面的資料不足降,歡迎高手指正
08/30 20:12, 10F

08/31 01:54, , 11F
我懂這個原理,但想知道有沒有其他寫法可以同時隨螢幕下滑
08/31 01:54, 11F

08/31 01:55, , 12F
,又不會在放大時整個消失
08/31 01:55, 12F

08/31 10:48, , 13F
其實不是很理解你講的放大,現在新一點的網站都有rwd
08/31 10:48, 13F

08/31 10:49, , 14F
直接用bootsrap或是研究他的css寫法,其實不難..
08/31 10:49, 14F

08/31 11:17, , 15F
第一個是,如果要手機也可以看,客戶應該要多付錢
08/31 11:17, 15F

08/31 11:18, , 16F
第二,簡單一點,用 css @media max-width 做一個針對小螢幕
08/31 11:18, 16F

08/31 11:19, , 17F
的版型,這樣也可以,不會太複雜~
08/31 11:19, 17F

08/31 11:19, , 18F
應該是 min-width 你會比較用到~
08/31 11:19, 18F

08/31 16:23, , 19F
的確如KC73所說,要做到RWD客戶要有預算,他們並沒有,
08/31 16:23, 19F

08/31 16:24, , 20F
所以我也沒意願整個幫他變形,才會針對這個點來問問看,
08/31 16:24, 20F

08/31 16:25, , 21F
如果真的不行,就看他們是不考慮手機,或不要用fixed
08/31 16:25, 21F

08/31 16:26, , 22F
還是很謝謝各位的回答 ^______^
08/31 16:26, 22F

09/01 08:54, , 23F
異次元XDD
09/01 08:54, 23F
文章代碼(AID): #1K0Oplfa (Web_Design)