CSS 使 div 停留在页面底部

标签 css html position

我在 Fireworks 中设计了一个页面,然后在 CSS 切片中将其导入 Dreamweaver。当中间切片 (indexr3c2) 中的内容从页面底部溢出时,我希望最后一个切片 (indexr4c1) 留在页面底部,我不知道这是否可能按照我的方式完成...这是我的代码:

    <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 并给它一个 bottom 0 的距离。

​#bottom {
    position:fixed;
    bottom: 0;
}​

DEMO

关于CSS 使 div 停留在页面底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11106638/

相关文章:

html - 无法更改 margin

javascript - Javascript 上的正确 CSS 代码

html - 最小宽度嵌套表格 HTML 电子邮件

html - 图标图像未以内联 block 方式显示

html - 导轨 : image change position after being updated

html - 获取两个跨度以将一个跨度显示在缩略图旁边的另一个跨度下方

html - css 过渡停止工作

html - 带有文本的 Div 不会居中

java - 从 html 文档中解析 href 并通过 xpath 求值返回空指针异常

html - flexbox 中的自动换行不遵守 100% 宽度限制