CSS粘性页脚不工作

• Z时代
• 2024-01-10
• 分类：问答

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

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

这里是我的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> 

回答：

以上是 CSS粘性页脚不工作 的全部内容， 来源链接： utcz.com/qa/265176.html