首页 > 代码库 > 如何正确使用width height 进行合理布局
如何正确使用width height 进行合理布局
两个问题引题
1）width，height设置为百分比
2）max-width , max-height 到底是什么意思
0、max-width，max-height 一帮情况使用在图形元素当中，原因是怕图片超出了父容器的大小，那么控制图片最大就是这个值，超过了则按这个值显示，如果没有超过则按 width height进行布局。
1、针对所有HTML元素都具有width 与 height ，而且 HTML标签属性与CSS属性在width和height中都是同样的作用。
2、关于width使用百分比问题，width 与 height都是指在父容器的width 与 height 基础上计算宽与高，虽然用百分数，但不是真正意义上的占有多少，父容器的width与height只是一个计算的参考值，虽然子元素被父元素包含，但是在宽度与高度计算上没有包含关系。另外，width height可以设置200%就不足为奇了，以父元素为基础计算宽高而已了。
3、虽然说盒子模型中有margin border padding ， 但是，如果我们使用百分比，你就会发现无论是margin还是padding他们都是以父容器的宽度为基础值计算的，然而没有与高度扯上关系，那么padding-top，padding-bottom，margin-top，margin-bottom都是按父容器的宽度来计算的，高度已经不在计算范围内。然而，border是不能使用百分比的，可以试试，绝对无效。这些给我们一个启发： 实际开发过程中对于width我们一般采用百分比进行屏幕适应，但不会对高度进行百分比控制。一般容器的高度都是让他自适应的，然而调整相邻容器间的距离则是采用margin 或 padding ，采用这两个我们也是使用绝对像素为单位进行调整，换句话说，调整间隙一般都是固定的。当然对于一些要求固定高的组件我们的确是用绝对像素单位进行确定，但是对于容器的大小是自适应最好的。采用margin是为了没有背景色，采用padding是为了填充背景色。
总结起来：
1）所有宽度采用百分比
2）容器高度，自适应
3）具体组件高度采用em px 确定
4）调整容器间隙采用 padding margin border 都只用em px
5）特殊固定位置的采用 js动态控制而对于那些要有固定位置的，自然我们采用的是js动态控制，
犹如：某些时候我们想要把公司信息放在浏览器底部，但是前面公司要展现的内容我们是不确定的，所以需要动态获取高度来确定后面元素的位置。如下：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>div三列布局及div始终定位浏览器底部</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
}
#header {
height: 50px;
background-color: #EAEAEA;
border:1px solid #333;
padding:4px;
}
#left {
position:absolute;
left:0;
top:30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
.content {
position:relative;
top: 30px;
margin-left:220px;
margin-right:220px;
margin-bottom:20px;
color:#333;
background:#ffc;
border:1px solid #333;
padding:0 10px;
}
#right {
position:absolute;
right:0;
top: 30px;
padding:0;
width:200px;
color:#333;
background:#eaeaea;
border:1px solid #333;
}
#divContent {
position:relative;
width:100%;
}
#left p {
padding:0 10px;
}
#right p {
padding:0 10px;
}
p.top {
margin-top:20px;
}
.divBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:relative;
width:100%;
margin-top:20px;
}
.divShortBottom {
background-color:#f1f1f1;
border:1px solid #333;
position:absolute;
bottom:0;
width:100%;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function sameHeight() {
var documentBodyHeight;
if((typeof windows)!=‘undefined‘) {
//Non-IE
alert(‘Non-IE‘);
documentBodyHeight = windows.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode‘
alert(‘IE 6+‘);
documentBodyHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
alert(‘IE 4‘);
documentBodyHeight = document.body.clientHeight;
}
//alert(documentBodyHeight);
if (document.getElementById(‘left‘).clientHeight >documentBodyHeight)
{ //alert(‘ok‘);
document.getElementById(‘divContent‘).style.height =document.getElementById(‘left‘).clientHeight +document.getElementById(‘left‘).offsetTop+ "px";
document.getElementById(‘divBottom‘).className = ‘divBottom‘;
} else {
//alert(‘not ok‘);
document.getElementById(‘divBottom‘).className = ‘divShortBottom‘;
}
}
</SCRIPT>
</head>
<body onl oad="sameHeight()">
<div id="header">
<p>The Header</p>
</div>
<div id="divContent">
<div id="left">
<p>The Body Left</p>
</div>
<div>
<p>The body Center</p>
</div>
<div id="right">
<p>The body Right</p>
</div>
</div>
<div id="divBottom">The Bottom</div>
</body>
</html>
如何正确使用width height 进行合理布局