当前位置: 代码迷 >> HTML/CSS >> div+css自适应浏览器高度和好除元素浮动
  详细解决方案

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

热度:176   发布时间:2012-10-29 10:03:53.0
div+css自适应浏览器高度和解除元素浮动

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

  相关解决方案