[问题] 要怎么固定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