Home > Article > Web Front-end > CSS-div高度100%设置问题_html/css_WEB-ITnose
CSS-div高度100%设置问题_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:33:33945browse
div常用的属性width和height，有的时候如果我们需要让div的高度是整个屏幕的高度，设置height：100%发现并没有什么作用，并不是这样设置不对，而是w3c规范中关于百分比的设置是相对于父元素的，如下所示:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>博客园-FlyElephant</title> <style type="text/css"> .parent { background: red; height: 100%; } </style></head><body> <div class="parent"> 博客园-FlyElephant </div></body></html> 发现div的高度只是文字的高度，如果需要让div铺满整个屏幕，我们需要设置一下父级元素的高度，也就是html和body:
html,body { height: 100%; padding: 0; margin: 0; } 高度是相对于父级元素的，但是html级元素默认宽度是100%，即整行~
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：微信公众号与HTML 5混合模式揭秘1--如何部署JSSDK_html/css_WEB-ITnoseNext article：zend 设置html编码乱码的问题_html/css_WEB-ITnose