[問題] 要怎麼固定header跟footer的高度

看板Web_Design作者 (Abby)時間8年前 (2016/03/27 12:20), 8年前編輯推噓4(4推 0噓 8→)
留言12則, 3人參與, 最新討論串1/1
不好意思 我第一次寫網頁，也有嘗試爬文了 還是不明所以QQ 我是寫php+html+css 我對網頁高度一直很不知道怎麼比較好 我目前index很簡單 就是header（一排選單） content（中間放一張圖片） footer（一個長條） 都是div 然後最外面再用一個div wrapper包著 因為希望index可以剛好跟使用者的瀏覽器一樣大 而不會發生排版亂掉的關係 我很簡單的把header height設20% content設65% footer設15% （wrapper height設100%，包著這三個div） width都設100% 嘗試用很多瀏覽器跟不同電腦看也沒什麼問題 排版沒有跑掉 可是現在要寫第二個頁面時 我爬文以後得知header跟footer應該要用include或require進來的方式 也成功把這兩個寫成php require 網頁外觀也沒有改變 想請問 1. 這樣css排版是不是每次都要重寫，尤其我第二個頁面的高度確定不會再是剛好一個瀏 覽器視窗的100%，可能會是兩倍高或是1000px之類的，原本用%數定板整個都會跑掉，但 是我又不知道index得到比例的真實數字是多少px 2. 這樣要怎麼讓每個header跟footer的高度都一樣，才會是一直定在那的感覺呢 3. 像我index這樣用%數定版是不是不好？但是我又擔心使用者瀏覽器、螢幕大小不同， 導致排版跑掉，請問怎麼寫才是比較好的寫法呢？ 衷心感謝 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.82.50.250 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1459052415.A.740.html ※ 編輯: yaya517 (111.82.50.250), 03/27/2016 12:22:27
推
03/27 14:22, , 1F
一般來說%數都是用在寬度吧 在RWD的部分
03/27 14:22, 1F
→
03/27 14:23, , 2F
一直定在那的意思是? fixed嗎@@
03/27 14:23, 2F
推
03/27 14:33, , 3F
應該是 header 跟 footer 指定高度後 fixed 沒錯
03/27 14:33, 3F
→
03/27 14:34, , 4F
內容就 overflow-y: auto;
03/27 14:34, 4F
謝謝兩位大大的回文 原來用%數是正確的（還怕我亂用） 問題是這樣的 我的index現在是 div wrapper height 100% 包著三個div header height 20% content 65% footer 15% 如此剛好填滿瀏覽器視窗 但是頁面2預期是 header和footer的height不動 一個一樣置頂和置底 但是content的高度可能變成在index的兩倍大 我本來想是改wrapper的height 來讓content的height變大 但是這樣header跟footer的height就會跑掉 變得跟在index時的height不一致 請問這樣的話我應該怎麼改比較好呢？ 我想要讓content高度變大 但是header和footer的height又要和上一個頁面相同 另外請問每個頁面都要寫一份.css是正常的嗎？ 謝謝 ※ 編輯: yaya517 (111.82.50.250), 03/27/2016 15:33:08
推
03/27 15:31, , 5F
用 vw vh 去設定呢？
03/27 15:31, 5F
※ 編輯: yaya517 (111.82.50.250), 03/27/2016 15:38:16 ※ 編輯: yaya517 (111.82.50.250), 03/27/2016 15:52:24
推
03/27 16:03, , 6F
看你的需求...我不會用 % 來設 header 和 footer
03/27 16:03, 6F
→
03/27 16:03, , 7F
因為在很長或很扁的瀏覽器高度下它們的尺寸很可能很奇怪
03/27 16:03, 7F
→
03/27 16:04, , 8F
簡單做了一下，不確定是不是你要的，參考看看：
03/27 16:04, 8F
→
03/27 16:04, , 9F
03/27 16:04, 9F
謝謝~~ 抱歉因為我第一次寫網頁所以完全沒有經驗QQ 版型是我要的沒錯 請問如果這樣用固定高度 會不會也會有在不同電腦上版型很怪的問題？ 要怎麼解決呢 而且這樣像我的index 會不會因為瀏覽器或螢幕大小的關係 導致我的content底部跟footer上方有很空隙 （因為在footer設bottom：0；所以會貼底部） 但是如果不貼底部 又會造成下方有白色空隙 謝謝～～ ※ 編輯: yaya517 (111.82.50.250), 03/27/2016 16:15:11 ※ 編輯: yaya517 (111.82.50.250), 03/27/2016 16:17:58
→
03/27 19:21, , 10F
只要你高度不要設太誇張高，電腦螢幕上應該還好，
03/27 19:21, 10F
→
03/27 19:22, , 11F
但是手機螢幕橫放之類就非常可能很怪，要再做 RWD 的調整。
03/27 19:22, 11F
→
03/27 19:23, , 12F
至於不想有空隙..只能請你充實內容了。內容少當然有空隙= =;
03/27 19:23, 12F
感謝大家的回答 目前我找到的解決方式是 1.把最外面的wrapper設成200% header就可以跟著等比例變10%（等於不變） footer同理 多的給content 2.用js抓clientHeight再直接設變數值到header的height 3.用m大的方法（上下抓高度fixed 中間flow y auto） 我會再多加學習跟爬文研究RWD的 （目前是想說把電腦可看的做好再開始研究手機平板等的響應式設計QQ） 再次感謝～ ※ 編輯: yaya517 (1.165.78.104), 03/27/2016 22:49:24 ※ 編輯: yaya517 (1.165.78.104), 03/27/2016 22:50:52 ※ 編輯: yaya517 (1.165.78.104), 03/27/2016 22:52:31
‣ 更多 yaya517 的文章
文章代碼(AID): #1Mzrz_T0 (Web_Design)