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

最新推荐文章于 2022-11-25 16:36:28 发布

lostgdi

最新推荐文章于 2022-11-25 16:36:28 发布

阅读量1k

点赞数

分类专栏： HTML (CSS)

HTML (CSS) 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

原理是：

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 */
}