div+css自适应浏览器高度和解除元素浮动

zxxzxx1989 · 发表于 2013-2-7 23:56:10

关于如何使背景图片自适应屏幕的问题，每个论坛上都有许多人在讨论，但是由于大家的思路不同，想要实现的效果具体也不同，所以，光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的基本属性一个个看起许多解决方案就藏在属性的定义中，，对我这种菜鸟尤其如此

		自动登录	找回密码
密码			立即注册

div+css自适应浏览器高度和解除元素浮动

浏览过的版块