html页面中DIV高度100%设置问题

初学HTML5，需要实现网页DIV左右居中，高度自动填充到100。发现对页面中DIV设置100%高度属性时无效。后来查资料发现HTML网页中div高度继承自父元素——》body——》html
因此解决方案是先对html和body设置100%高度：
html,body { height: 100%;margin: 0; padding: 0;}
然后对应的div设置高度—height:100% 则可以生效。测试例子(DIV左右居中，高度自动填充到100)如下：

<!DOCTYPE html>
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>DIV百分百设置测试</title></head><style type="text/css">html, body {width: 500px;height: 100%; margin:0 auto;padding:0px}</style><body><div style="width:100%; height:100%;" ><Iframe name="tt" style="height:95%; width:95%;border:1px solid #000" src="" marginwidth="0" marginheight="0" scrolling="none" frameborder="0"></Iframe></div></body>
</html>

特别注意html和body都要设置height: 100%，缺失任何一个，对div设置高度-height:100%时都不会生效。

html页面中DIV高度100%设置问题相关推荐

html元素在模块中心显示,DW怎么设置DIV模块在页面中居中 DW如何设置网页打开绝对居中？...
Dreamweaver(DW)中的div层怎么居中 Dreamweaver中div怎么页面居中? Dreamweaver中div怎么页面居中?我写的DIV都是靠左,怎么让它页面居中?在.header的 ...
div高度100%,div宽度100%
正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?这个100%是 ...
css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
html div 100 无效,HTML / CSS - IE中div没有100％高度
好的,所以我遇到了问题 - 我很乐意解决这个问题. 我正在使用我最喜欢的方式设置简单的页眉/内容/页脚布局. 问题是我添加到布局的'content'div中的任何元素都无法在Internet Expl ...
关于页面无法实现高度100%的原因及实现方法。
1.由于页面中的html和body默认高度都是自适应的,所以单单给盒子设置高度100%是没有效果的,应该给html和body同时设置高度100%,这样才能把盒子撑开. 但是又由于body默认有marg ...
html textarea 自动高度,HTML页面中textarea高度自适应解决方案
背景: 页面上加了一个div标签,div标签下有一个textarea标签,textarea的内容通过后台读取数据自动填充,希望通过textarea的高度随着内容的增减,自动调整,在网上说通过设置tex ...
为什么定义!doctype html表格高度变高,!DOCTYPE html声明下div高度100%的问题解决方法...
在使用HTML代码创建网页,如果声明了,并且在代码中有div设置了高度为100%,可能会出现显示不正常的情况.比如下面这个代码: Title * {margin:0px;padding:0px;} d ...
jsp页面中div怎么显示html,jsp怎么把div隐藏
在web页面中,经常需要使用select控件来显示div的显示与隐藏,实现这个方法主要用到了setAttribute方法. 以下为示例代码: 通过选择项显示不同的结果 function showdiv ...

html页面中DIV高度100%设置问题

html页面中DIV高度100%设置问题相关推荐

最新文章

热门文章