浅谈CSS满屏品字布局中div设置height为百分比无效的问题
2017-03-01 09:46
246 查看
满屏品字布局：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html,body{
margin:0;
height:100%;
}
#top{
width:50%;
height:50%;
margin:0 auto;
background:red;
}
#left{
width:50%;
height:50%;
float:left;
background:blue;
}
#right{
width:50%;
height:50%;
float:left;
background:yellow;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
有时候，我们需要将div的高度设置为百分比形式，以便能更好的适配各种屏幕大小，如height：60%。
问题：height：60%无效。
解决办法：添加html, body{ margin:0; height:100%; }。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html,body{
margin:0;
height:100%;
}
#top{
width:50%;
height:50%;
margin:0 auto;
background:red;
}
#left{
width:50%;
height:50%;
float:left;
background:blue;
}
#right{
width:50%;
height:50%;
float:left;
background:yellow;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
</body>
</html>
有时候，我们需要将div的高度设置为百分比形式，以便能更好的适配各种屏幕大小，如height：60%。
问题：height：60%无效。
解决办法：添加html, body{ margin:0; height:100%; }。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS布局与定位——height百分比设置无效/背景色不显示
- CSS布局与定位——height百分比设置无效/背景色不显示
- div+css布局问题：设置浮动后的div高度变化后不超出最外层div
- Table布局width设置为百分比无效问题
- HTML给div设置百分比高度无效问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- 做网页，在IE6,正常，但是在IE8里面 母版里面的DIV内容长度现实就颜色出问题 把div的高度设置为：height:auto
- 解决XHTML中DIV+CSS布局时不能居中的问题
- div+css布局遇到的一些问题和解决方法
- DIV+CSS布局一行两列问题（Repeater布局）
- DIV+CSS网页布局中CSS无效的十个常见原因
- div在设置了宽度后的line-height问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法
- 用div+css解决VS2005中布局难的问题
- DIV+CSS布局的一个小问题的解决
- div+css布局时的浏览器兼容问题
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- div+css 布局常见问题及解决办法如下
- DIV+CSS 布局一行两列,左列固定宽度,右列自适应宽度;设置最小宽度