div+css自适应浏览器高度和好除元素浮动
日期：2014-05-17 浏览次数：20691 次
关于如何使背景图片自适应屏幕的问题，每个论坛上都有许多人在讨论，但是由于大家的思路不同，想要实现的效果具体也不同，所以，光copy别人的方法是行不通的，还是综合别人的经验，自己琢磨比较靠谱~
?
先说说我遇到的问题吧：
在body元素中定义了一些div块 ?具体如下（每个标签内的内容省略，仅做必要说明）
<<body>
<div id="page">
<div id="header"> </div>
<div id="content">
??<div id="container">
?? ?<div class="join">一个大小可变图片 由100x100变为150x150</div>
??</div>
?
??<div id="login_form">
?? ?一个form
??</div>
</div>
</page>
</body>
?
相关的css属性为：
?* {
list-style: none;
font-weight: normal;
vertical-align: baseline;
text-decoration: none;
border: 0;
margin: 0;
outline: none;
padding: 0;
}
#page {
border-color: #105c9a;
background-image:url(../images/page.gif);
background-repeat: repeat-x;
background-color: #025F9A;
}
#header {
width:100%;
height:250px;
} ??
?? ?#content{
padding-top:20px;
min-height:500px;
background-repeat: repeat-x;
}
#login_form{
float: right;
margin-right: 100px;
padding-top:70px;
?
} ??
问题1.定义了content的最小高度后，浏览器最下部总有一部分是白色，寻求使其撑满整个屏幕的方法。
?? 解决方法：将page标签去掉，定义body的背景图片以及背景颜色，。。。很怂吧很怂吧。。。我也觉得很怂。。。这就是新手啊。。。不不不 ?有过一些经验以后发现。。自己连新手都不是 ?完全是个门外汉~！！
?
问题2.由于设置了login_form的float属性，所以在伸缩浏览器的时候，元素会跟随右边框浮动，而如果将float值设为left ?那么join中的元素一旦变化，login form也会随之浮动，困惑了。。。
??解决方法：将join的大小设为固定值，大于其变化过程中的最大值，同样的原理，将content的大小设定为大于其中所有元素宽度之和即可消除浮动问题。
?
修改后的css为：
?
body{
background-image:url(../images/page.gif);
background-repeat: repeat-x;
background-color: #025F9A;
}
a:hover{
text-decoration:underline;
color: #FFF;
}
#header {
width:100%;
height:250px;
} ??
?? ?#content{
padding-top:20px;
width: 1200px;
margin-left: 70px;
}
#container{
margin-top:50px;
display: inline;
width: 580px;
height: 270px;
}
#login_form{
padding-top:70px;
padding-left: 50px;
float: left;
z-index:-1;
}
?
?
今天的领悟是：要从css的基本属性一个个看起 ?许多解决方案就藏在属性的定义中，，对我这种菜鸟 尤其如此
