我在Fireworks中设计了一个页面,然后将其导入CSS切片中的Dreamweaver中。我希望最后一个切片(indexr4c1)停留在页面的底部,而中间切片(indexr3c2)的内容从其底部溢出时,我不知道这样做的方式是否可行...这是我的代码:
<html>
<head>
<title>index.gif</title>
<meta http-equiv="Content-Type" content="text/html;iso-8859-1">
<meta name="description" content="FW MX CSS Layer">
<style type="text/css">
#indexr1c1 {
position:absolute;
left:0px;
top:0px;
width:955px;
height:143px;
background-image:url(index_r1_c1.gif);
}
#indexr2c1 {
position:absolute;
left:0px;
top:143px;
width:955px;
height:56px;
background-image:url(index_r2_c1.gif);
}
#indexr3c1 {
position:absolute;
left:0px;
top:199px;
width:185px;
height:326px;
background-image:url(index_r3_c1.gif);
}
#indexr3c2 {
position:absolute;
left:185px;
top:199px;
width:608px;
height:326px;
background-image:url(index_r3_c2.gif);
}
#indexr3c3 {
position:absolute;
left:793px;
top:199px;
width:162px;
height:326px;
background-image:url(index_r3_c3.gif);
}
#indexr4c1 {
position:absolute;
left:0px;
top:525px;
width:955px;
height:75px;
background-image:url(index_r4_c1.gif);
}
</style>
</head>
<body bgcolor="#ffffff" >
<div id="indexr1c1"></div>
<div id="indexr2c1"></div>
<div id="indexr3c1"></div>
<div id="indexr3c2"></div>
<div id="indexr3c3"></div>
<div id="indexr4c1"></div>
</body>
</html>
非常非常感谢您的任何答复:)
最佳答案
而不是从顶部给出位置,而是将其设置为position:fixed
并将其底部距离设置为0
。
#bottom {
position:fixed;
bottom: 0;
}
DEMO