作者yaya517 (Abby)
看板Web_Design
标题[问题] 要怎麽固定header跟footer的高度
时间Sun Mar 27 12:20:12 2016
不好意思
我第一次写网页，也有尝试爬文了
还是不明所以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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1459052415.A.740.html
※ 编辑: yaya517 (111.82.50.250), 03/27/2016 12:22:27
1F：推 crossdunk: 一般来说%数都是用在宽度吧 在RWD的部分03/27 14:22
2F：→ crossdunk: 一直定在那的意思是? fixed吗@@03/27 14:23
3F：推 miau: 应该是 header 跟 footer 指定高度後 fixed 没错03/27 14:33
4F：→ miau: 内容就 overflow-y: auto;03/27 14:34
谢谢两位大大的回文
原来用%数是正确的（还怕我乱用）
问题是这样的
我的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
5F：推 ntme: 用 vw vh 去设定呢？03/27 15:31
※ 编辑: yaya517 (111.82.50.250), 03/27/2016 15:38:16
※ 编辑: yaya517 (111.82.50.250), 03/27/2016 15:52:24
6F：推 miau: 看你的需求...我不会用 % 来设 header 和 footer03/27 16:03
7F：→ miau: 因为在很长或很扁的浏览器高度下它们的尺寸很可能很奇怪03/27 16:03
8F：→ miau: 简单做了一下，不确定是不是你要的，参考看看：03/27 16:04
谢谢~~
抱歉因为我第一次写网页所以完全没有经验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
10F：→ miau: 只要你高度不要设太夸张高，电脑萤幕上应该还好，03/27 19:21
11F：→ miau: 但是手机萤幕横放之类就非常可能很怪，要再做 RWD 的调整。03/27 19:22
12F：→ miau: 至於不想有空隙..只能请你充实内容了。内容少当然有空隙= =; 03/27 19:23
感谢大家的回答
目前我找到的解决方式是
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