html body div height: 100%;

最近做了测试

html{
height: 100%;//全部内容高度,包括滚动出现的内容
background-color:#000;
}

body{
height: 100%;//只一页屏幕,用作滚动的标准,不包括滚动出现的内容
}

body  div{
height: 100%;//继承body高度,也只是一页屏幕,不包括滚动出现的内容
}

想让div高度自适应全部内容(即滚动的内容,那么就不要设置高度为100%,使用默认就行)

时间: 2024-10-22 01:46:13

html body div height: 100%;的相关文章

如何让元素支持 height:100%效果

如何让元素支持 height:100%效果? 有两种方法.(1) 设定显式的高度值. 这个没什么好说的,例如,设置 height:600px,或者可以生效的百分比值高度.例如,我们比较常见的:html, body {height: 100%;}(2) 使用绝对定位. 例如:div {height: 100%;position: absolute;}此时的 height:100%就会有计算值,即使祖先元素的 height 计算为 auto 也是如此.需要注意的是,绝对定位元素的百分比计算和非绝对定

div设置高度height:100%实际却为0的解决

<html> <head> <title>无题</title> </head> <body> <div id="div" style="width:100%;height:100%>     我是DIV里的内容 </div> </body> </html> 如上,当设置div的height为100%时,打开页面是一片空白,点审查元素进去看,发现div的高度为

height:100%不起作用(无效),div全屏

当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段代码. 下面给个div全屏的示例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> htm

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

&lt;!DOCTYPE html&gt;声明下div高度100%的问题

在使用HTML代码创建网页,如果声明了<!DOCTYPE html>,并且在代码中有div设置了高度为100%,可能会出现显示不正常的情况.比如下面这个代码: <!DOCTYPE HTML> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type=&q

如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离.例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度. 而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度.所以,

flex引起height:100%失效

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; b

CSS高度自适应 height:100%;

在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一列布局</title> <style> html, body { margin: 0; padding: 0; wi

height:100%

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 *{ 9 margin:0px; padding:0px; 10 } 11 body{height:100%;} 12 ul{overf