css footer 定位

最新推荐文章于 2023-10-19 12:25:30 发布

原创最新推荐文章于 2023-10-19 12:25:30 发布 · 523 阅读

0 ·

CC 4.0 BY-SA版权

HTML5、CSS、JavaScript 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍了如何使用CSS进行底部固定布局，包括使用相对定位和绝对定位的技巧，确保在不同屏幕尺寸下都能保持良好的视觉效果。

.footer {
    background: rgb(108, 135, 96);
    /*position: absolute;*/
    bottom: 0px;
    width: 100%;
    /*white-space: nowrap;*/
    /* Set the fixed height of the footer here */
    height: 35px;
    line-height: 35px; /* Vertically center the text there */
    font-size: 0.7rem;
    position: absolute;  /*重要，保证在最下面*/
  
    left: 0; /* IE下一定要记得 */
   
}


.foot {
  
    bottom: 35px; /*和下面版权声明高度一致*/
    position: absolute;
}

div {
    display: block;
}

#wapper {
    position: relative; /*重要！保证footer是相对于wapper位置绝对*/
    height: auto; /* 保证页面能撑开浏览器高度时显示正常*/
    min-height: 100% /* IE6不支持，IE6要单独配置*/
}

#main-content {
    padding-bottom: 160px; /*重要！给footer预留的空间*/
}