css - 百分比min-height的一个问题
问题描述
直接上代码吧
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style>* { margin: 0; padding: 0;}html { height: 100%;}body { min-height: 100%;}#main { background-color: #333; color: #eee; min-height: 100%;} </style></head><body><p id='main'> This is main section</p></body></html>
https://jsfiddle.net/yaxin/rj7Ljwyx/
上面的代码中，html和body都已经是100%了也就是说body是有高度的，但是为很么#main元素没有撑开还是一行字体的高度。
当body设置height而不是min-height为100%时可以实现上述需求，但是为什么？
问题解答
回答1：楼上所有回答设置height:100%的，难道没看到题主“当body设置height而不是min-height为100%时可以实现上述需求，但是为什么？”这句话吗？
题主是要问为什么？
我来说说鄙人的理解：
1.height的百分比
当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效.
2.min-height的百分比
设置min-height的元素即使内容的高度很少时也能撑开到min-height设置的高度;当内容的高度大于min-height时就设置为内容的高度.
要使min-height的百分比值生效,其父元素的height值必须为一个固定的高度或者是一个有效的百分比高度.
值得注意的是,父元素设置了有效的min-height但没有设置height属性时,子元素的height和min-height的百分比不会生效.因为设置height和min-height必须基于一个设置了固定高度或者是一个有效百分比高度的父元素.
html { height: 100%;}body { min-height: 100%;}#main { background-color: #333; color: #eee; min-height: 100%;}
题主这种多层百分比高度嵌套的风格，应该尽量避免，因为子元素百分比高度基于父元素百分比高度的前提是父元素的父元素必须有一个明确的高度。
补充：不但height如此， width也是一样。《css权威指南》指出height width百分数是相对于包含块的。《css权威指南》又指出（P180），如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面html 的height设置为任何值都跟设置没设置一样。
回答2：设置成height 不能设置min-height
回答3：html,body {
height: 100%; }回答4：
html,body { height: 100%;}回答5：
body和html标签比较特殊需要都设置height:100%才能使得body内的子元素height使用百分比。
相关文章：
1. javascript - jQuery post()方法，里面的请求串可以转换为GBK编码么？可以的话怎样转换？2. python3.x - python 中的maketrans在utf-8文件中该怎么使用3. javascript - 一排三个框，各个框的间距是15px,距离外面的白框间距也是15px，这个css怎么写？4. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么5. html5 - vue-cli 装好了 新建项目的好了，找不到项目是怎么回事？6. javascript - immutable配合react提升性能？7. mysql - C#连接数据库时一直这一句出问题int i = cmd.ExecuteNonQuery();8. django - python 2层文件夹导入9. python - 用urllib抓取网页上的下载链接，目标文件是xls形式，但发现抓下来的xls是空表，里面只有一句报错信息，求帮助。10. javascript - vue 手机端项目在进入主页后 在进入子页面，直接按返回出现空白情况
网公网安备