如何在没有位置的情况下固定底部的页脚：固定;？
我想将我的页脚修复到底部。无论内容长度如何，如何修复页脚？我搜索了几个文件，他们通常使用容器上的最小高度和负边距。我挣扎了这么多时间但找不到解决办法，我需要你的帮助。谢谢。
这是HTML源代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- 기본 JS 파일 로드 -->
<!--%import("./js/global.js")-->
<!--%import("./js/modal_window.js")-->
<!--%import("./js/jquery.blend-min.js")-->
<!--@if($layout_info->display_promotion=='slide')-->
<!--%import("./js/jTypeWriter.js")-->
<!--%import("./js/rotation.js")-->
<!--@end-->
<!--@if($layout_info->display_promotion=='flash')-->
<!--%import("./js/swfobject.js")-->2014-06-24
<!--@end-->
<!-- 기본 CSS 파일 로드 -->
<!--%import("./css/layout.css")-->
<!--%import("./css/option.css")-->
<!--%import("./default.css")-->
<!--%import("./css/slider.css")-->
<!-- PXE Packages CSS 파일 로드 -->
<!--%import("./packages/basic_plugin_pxeSky/accounts.css")-->
<div id="container_site">
<div id="header">
<div class="wrap">
<div class="logo"><a href="/index">Logo</a></div>
<nav>
<ul class="main">
<li loop="$main_menu->list=>$key1,$val1"><a href=" {$val1['href']}" class="on"|cond="$val1['selected']" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a></li>
</ul>
</nav>
<nav>
<ul class="accounts">
<li cond="!$is_logged"><a href="#" class="login">로그인</a></li>
<li cond="$is_logged"><a href="{getUrl('act','dispMemberLogout')}">로그아웃</a></li>
<li cond="!$is_logged"><a href="<!--@if($layout_info->signup_mid)-->{getUrl('act','dispMemberSignUpForm','mid', $layout_info->signup_mid)}<!--@else-->{getUrl('act','dispMemberSignUpForm')}<!--@end-->">회원가입</a></li>
<li cond="$is_logged"><a href="<!--@if($layout_info->signup_mid)-->{getUrl('act','dispMemberInfo','mid', $layout_info->signup_mid)}<!--@else-->{getUrl('act','dispMemberInfo')}<!--@end-->">마이페이지</a></li>
</ul>
</nav>
</div>
</div><!--header 끝-->
<div id="container_body">
<div id="container_contents">
<div class="left_panel_full">
<div class="left_panel_nav_wrapper">
<div class="left_panel_nav">
<span style="margin:5px 0 10px 0;"/>Left Title</span>
<ul id="lnb" style="border-top:2px solid #000; padding-top:20px;">
<li loop="$side_menu1->list=>$key1,$val1" class="on"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="on"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
<div class="left_panel_nav">
<ul id="lnb">
<li loop="$side_menu2->list=>$key1,$val1" class="on"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="on"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
<div class="left_panel_nav">
<ul id="lnb">
<li loop="$side_menu3->list=>$key1,$val1" class="on"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="on"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
<div class="left_panel_nav">
<ul id="lnb">
<li loop="$side_menu4->list=>$key1,$val1" class="on"|cond="$val1['selected']">
<a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
<ul cond="$val1['list']">
<li loop="$val1['list']=>$key2,$val2" class="on"|cond="$val2['selected']">
<a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a></li>
</ul>
</li>
</ul>
</div>
</div><!--end of left_panel_nav_wrapper-->
</div><!--end of left_panel_full-->
<div class="panel_content">
{$content}
</div>
</div><!--container_content 끝-->
</div><!--container_body 끝-->
</div><!--container_site 끝-->
<div id="footer">
<ul class="bnav">
<li loop="$bottom_menu->list=>$key,$val" class="on"|cond="$val['selected']">
<a href="{$val['href']}" onclick="window.open(this.href);return false;"|cond="$val['open_window']=='Y'">{$val['link']}</a></li>
</ul>
<div class="hzn"> </div>
<!--<img src="/imgs/css/newinfo.png" class="copyright" />--><span> Footer </span>
</div><!--end of footer-->
这是CSS ...
@charset "utf-8";
/* Basic */
html,body { height:100%; margin:0; overflow-y:scroll; }
#container_site { min-height:100%; margin-bottom:-142px;}
/* Header */
#header { width:100%; height:55px; border-top:4px solid blue; }
#header .wrap { width:970px; margin:0 auto; position:relative; }
#header .logo { position:absolute; top:17px; left:0; }
#header .main { position:absolute; top:0px; left:171px; margin:0; padding:0; list-style: none; border-left:1px solid #e0e2e7; }
#header .main li { position:relative; height:53px; float:left; margin:0; padding:0; border-right:1px solid #e0e2e7; }
#header .accounts { position:absolute; top:21px; right:15px; margin:0; padding:0; list-style: none; }
#header .accounts li { float:left; display: inline-block; margin:0 0 0 10px; padding:0 0 0 10px; font:9pt 돋움; letter-spacing:-1px; }
#header .accounts li a { color:#474d56; }
/* #header .more { position:absolute; bottom:0; right:0; width:240px; height:38px; z-index:1000; }
#header .more img { position:absolute; bottom:12px; right:50px; } */
/* Content */
#container_body { width:970px; position:relative; left:0; margin:0 auto; }
#container_contents { width:970px; border:1px solid #a9afb4; background-color:#f8f9f9; overflow:hidden; min-height:100%;}
.wrapperTrans { }
.left_panel_full { float:left; min-height:100%;}
.left_panel_nav_wrapper { width:170px; }
.left_panel_nav { margin-left:15px; margin-top:20px; width:137px; border-bottom:1px solid #a9afb4; }
#lnb { list-style:none; margin:0; padding:0; }
#lnb li a { text-decoration:none; color:#000; display:block; height:15px; margin:0; padding:0; margin-bottom:5px; padding-bottom:5px; border-bottom:1px solid #e8e8e8; }
#lnb li ul { list-style:none; margin:0; padding:0; margin-left:0px; }
#lnb li ul li a { text-decoration:none; color:#444; height:15px; padding-left:15px; margin-top:3px; border-bottom:1px solid #eaeaea;}
#lnb li ul li:last-child a { border-bottom:none; }
#lnb li ul .on a { text-decoration:none; color:#347cd5; height:15px; background:url(imgs/small_on.gif) no-repeat right 7px; padding-left:15px; border-bottom:1px solid #eaeaea;}
.panel_content { float:left; padding:10px 0px 10px 15px; width:780px; border- left:1px solid #ddd; background-color:#fff; }
/* Footer */
#footer { position:relative; height:142px; margin:0px; bottom:0; background-color:#454b55; }
#footer .bnav { position:absolute; top:14px; left:22px; margin:0; padding:0; overflow:hidden; list-style:none; }
#footer .hzn { width:100%; position:absolute; top:24px; }
#footer .bnav li { float:left; margin:0 25px 0 0;}
#footer .bnav li a { text-decoration:none; color:#d7d7d7; !important; /* background:url(/imgs/css/vr_extra.gif) no-repeat left */ }
#footer .copyright { position:absolute; top:48px; left:16px; }
/* Etc */
.block h2 { color:#333; }
答案 0 :(得分：-2)
请检查相对于您的页脚的位置：
'http://jsfiddle.net/p4r5asqr/1/'