您的位置：首页 > Web前端 > CSS

css底部不动的布局方法[分享][完美]

2013-07-02 21:39 211 查看

原理是：

1.定义一个绝对高度为100%的容器，包含min-height属性。所有相关作用的代码置于其中。

2.头部默认布局；

3.布局内容容器（中间）内边距为指定 px（大于等于footer高度）

4.布局footer为绝对定位。

原文：

http://codecamel.com/fullheight

代码如下：

HTML

<body>
    <div id="wrapper">
        <div id="header">Header added just for demonstration purposes</div>
        <div id="content">Main content goes here</div>
        <div id="footer">And this is my footer</div>
    </div>
</body>

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative; /* Required to absolutely position the footer */
}

#footer {
    height: 50px; /* Define height of the footer */
    position: absolute;
    bottom: 0; /* Sit it on the bottom */
    left: 0;
    width: 100%; /* As wide as it's allowed */
}

#content {
    padding-bottom: 50px; /* This should match the height of the footer */
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航