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

作者: yaya517 (Abby)   2016-03-27 12:20:12
不好意思
我第一次寫網頁,也有嘗試爬文了
還是不明所以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這樣用%數定版是不是不好?但是我又擔心使用者瀏覽器、螢幕大小不同,
導致排版跑掉,請問怎麼寫才是比較好的寫法呢?
衷心感謝
作者: crossdunk (推噓自如)   2016-03-27 14:22:00
一般來說%數都是用在寬度吧 在RWD的部分一直定在那的意思是? fixed嗎@@
作者: miau (米奧)   2016-03-27 14:33:00
應該是 header 跟 footer 指定高度後 fixed 沒錯內容就 overflow-y: auto;
作者: ntme (one shot one kill)   2016-03-27 15:31:00
用 vw vh 去設定呢?
作者: miau (米奧)   2016-03-27 16:03:00
看你的需求...我不會用 % 來設 header 和 footer因為在很長或很扁的瀏覽器高度下它們的尺寸很可能很奇怪簡單做了一下,不確定是不是你要的,參考看看:https://jsfiddle.net/en4gmoge/只要你高度不要設太誇張高,電腦螢幕上應該還好,但是手機螢幕橫放之類就非常可能很怪,要再做 RWD 的調整。至於不想有空隙..只能請你充實內容了。內容少當然有空隙= =;

Links booklink

Contact Us: admin [ a t ] ucptt.com