css中 html,body{height:100%;} 是什么意思
简单写一下代码<body><divclass="container"><divclass="mainbg"></div></div></body>导入一个CSS/*CSS...
简单写一下代码
<body>
<div class="container">
<div class="mainbg">
</div>
</div>
</body>
导入一个CSS
/* CSS Document */
body, html { height: 100%; }
.container{
height:100%;
}
.mainbg{
background: url('1.jpg') no-repeat scroll center top transparent;
height:50%;
}
当样式html,body{height:100%}改成body{height:100%｝时，图片就显示不出来。
html{height:100%}是什么意思呀，难道高度是相对浏览器的？ 展开
<body>
<div class="container">
<div class="mainbg">
</div>
</div>
</body>
导入一个CSS
/* CSS Document */
body, html { height: 100%; }
.container{
height:100%;
}
.mainbg{
background: url('1.jpg') no-repeat scroll center top transparent;
height:50%;
}
当样式html,body{height:100%}改成body{height:100%｝时，图片就显示不出来。
html{height:100%}是什么意思呀，难道高度是相对浏览器的？ 展开
9个回答
展开全部
div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。解决方法：只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度可惜的是浏览器一般默认解释为内容的高度，而不是100%。解决方法：只要为html和body设置高度为100%就可以了html,body{height:100%;}这样之后div会按比例来继承上一级的高度了.仅仅设置的DIV元素的height属性貌似没有什么效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
楼主，你好。
我亲自实验了你的HTML和CSS代码，的确，当样式html,body{height:100%}改成body{height:100%｝时，图片就显示不出来。
其实如果你试试下面的代码，图片仍然不显示。
<html>
<head>
<style type="text/css">
body{
}
.container {
}
.mainbg {
background: url('what-I-actually-do.jpg') no-repeat scroll center top transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="mainbg"> </div>
</div>
</body>
</html>
其实 .mainbg{height:50%;} 是相对于.container {height:100%;} 来说的；
而 .container {height:100%;} 又是相对于body{height: 100%;} 来说的；
而 body{height: 100%;} 则是相对于html{height: 100%;} 来说的。
如果你把 html{height: 100%;} 删除了，就等于没有一个初始高度了，CSS就不知道你的.mainbg{height:50%;}初始值是什么了。
我觉得也许下面的代码可能会更简洁和实用：
<html>
<head>
<style type="text/css">
body{
}
.container {
}
.mainbg {
background: url('what-I-actually-do.jpg') no-repeat scroll center top transparent;
min-height:500px; /*这并不是给它一个具体的高度值，而是让.mainbg有一个最小的高度值*/
}
</style>
</head>
<body>
<div class="container">
<div class="mainbg"> </div>
</div>
</body>
</html>
另外，你问“html{height:100%}是什么意思呀，难道高度是相对浏览器的？”，的确，这里的height:100%是相对于浏览器高度来说的。
希望我的回答能帮到你！
我亲自实验了你的HTML和CSS代码，的确，当样式html,body{height:100%}改成body{height:100%｝时，图片就显示不出来。
其实如果你试试下面的代码，图片仍然不显示。
<html>
<head>
<style type="text/css">
body{
}
.container {
}
.mainbg {
background: url('what-I-actually-do.jpg') no-repeat scroll center top transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="mainbg"> </div>
</div>
</body>
</html>
其实 .mainbg{height:50%;} 是相对于.container {height:100%;} 来说的；
而 .container {height:100%;} 又是相对于body{height: 100%;} 来说的；
而 body{height: 100%;} 则是相对于html{height: 100%;} 来说的。
如果你把 html{height: 100%;} 删除了，就等于没有一个初始高度了，CSS就不知道你的.mainbg{height:50%;}初始值是什么了。
我觉得也许下面的代码可能会更简洁和实用：
<html>
<head>
<style type="text/css">
body{
}
.container {
}
.mainbg {
background: url('what-I-actually-do.jpg') no-repeat scroll center top transparent;
min-height:500px; /*这并不是给它一个具体的高度值，而是让.mainbg有一个最小的高度值*/
}
</style>
</head>
<body>
<div class="container">
<div class="mainbg"> </div>
</div>
</body>
</html>
另外，你问“html{height:100%}是什么意思呀，难道高度是相对浏览器的？”，的确，这里的height:100%是相对于浏览器高度来说的。
希望我的回答能帮到你！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
因为你的.mainbg的值是用的百分比，这个百分比是相对于父级的。这里它的父级是body，所以body如果没有设置高度的话，它就不能判断50%究竟是多少！你可以把这个.mainbg的高度百分比值改用px值就可以了。
附：这种写法是正确的，它这么写是为了给body定义一个高度，高度等于100%，这个值实际上会随着页面高度而增加。这样写是为了方便下面的子元素可以继承。
附：这种写法是正确的，它这么写是为了给body定义一个高度，高度等于100%，这个值实际上会随着页面高度而增加。这样写是为了方便下面的子元素可以继承。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一楼 情迷光影 正确的。
就是说你如果不写：body, html { height: 100%; }
那么：.container{height:100%;} 里面的 height:100% 就无法生效。
那个 切个桃 小白，自己去学懂了来，不会就别去误导别人了嘛。
就是说你如果不写：body, html { height: 100%; }
那么：.container{height:100%;} 里面的 height:100% 就无法生效。
那个 切个桃 小白，自己去学懂了来，不会就别去误导别人了嘛。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
height:100% 的意思是高度自动伸缩 。是为了之后的某些子元素能够自动伸缩弄的。如果没有设置的话。子元素就不能够自动伸缩。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（7）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
