自适应布局,需要给html和body标签加上高度100%;
两栏布局
做两栏布局的时候,如果希望块元素高度为百分比时,必须在CSS样式表中加入:
html,body{
height:100%;
}
需要给根元素加上高度属性,因为百分比的宽高是继承的父元素的宽高的百分比;
两栏布局
第一种方法:一个块元素加上浮动,另一个块元素如果想和前一个浮动的块元素并排并且自适应浏览器宽度,那么需要给这个块元素加 overflow:hidden; (因为加上overflow:hidden后这个块元素就变成BFC布局,而BFC布局的块元素不会与浮动元素重叠)(PS:不用浮动的原因是因为没有加上宽度属性的话,浮动的块元素的宽度是被内容撑开的)
第二种方法:块元素都浮动起来,一个块元素的宽度固定,另一个自适应的块元素的宽度可以用 calc 这个属性值加在width属性后面,语法为:
.father{
width:calc(100% - 20px);
}