CSS粘性页脚不工作

2020年9月30日 45点热度 0条评论 来源: rws907

我有一个简单的布局,我试图去使用CSS。顶部和底部的行高35px,动态大小的中心。我试图让置顶页脚使用本教程的工作:http://www.cssstickyfooter.com/using-sticky-footer-code.htmlCSS粘性页脚不工作

然而,不是页脚是在底部,无论内容中间的金额,我看到以下内容:

Sticky Footer not Aligned to Bottom

这里是我的CSS

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

body{ 
font-family: Arial,Verdana; 
font-size: 12px; 
} 

#site_wrapper{ 
width: 100% 
min-height: 100%; 
background-color: #fff; 
padding: none; 
} 

#top_bar{ 
clear: both; 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
text-align: right; 
color: #fff; 
padding-right: 15px; 

} 

#content{ /* Content Wrapper */ 
clear: both; 
overflow: auto; 
padding-bottom: 35px; 
} 

#content_left{ 
float: left; 
width: 50%; 
color: #000; 
} 

#content_right{ 
float: right; 
width: 50%; 
color: #000; 
} 

#footer{ 
clear: both; 
position: relative; 
margin-top: -35px; /* negative value of footer height */ 
height: 35px; 
background-color: #1468b3; 
line-height: 35px; 
font-size: 14px; 
color: #fff; 
} 

这里是HTML

<div id="site_wrapper"> 
    <div id="top_bar"> 
    This is the Top Bar 
    </div> 
    <div id="content> 
    <div id="content_left"> 
     Test 
    </div> 
    <div id="content_right"> 
     Test 
    </div> 
    </div> 
</div> 
<div id="footer"> 
    This is the footer 
</div> 

===========解决方案如下:

添加height: 100%;#site_wrapper

DEMO

    原文作者:rws907
    原文地址: https://stackoverflow.com/q/16177326
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。