2015-05-09 144 views
-2

如何修復底部無腳位置:固定;?如何修復頁腳無腳位置:固定;?

我想修復我的頁腳底部。不管內容長度如何修復頁腳?我搜查了幾個文件,他們通常在容器上使用最小高度,並且使用負邊距。我掙扎了很多時間,但找不到解決辦法,我需要你的幫助。謝謝。

這裏是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")--> 

<[email protected]($layout_info->display_promotion=='slide')--> 
<!--%import("./js/jTypeWriter.js")--> 
<!--%import("./js/rotation.js")--> 
<[email protected]> 

<[email protected]($layout_info->display_promotion=='flash')--> 
<!--%import("./js/swfobject.js")-->2014-06-24 
<[email protected]> 

<!-- 기본 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="<[email protected]($layout_info->signup_mid)-->{getUrl('act','dispMemberSignUpForm','mid', $layout_info->signup_mid)}<[email protected]>{getUrl('act','dispMemberSignUpForm')}<[email protected]>">회원가입</a></li> 
       <li cond="$is_logged"><a href="<[email protected]($layout_info->signup_mid)-->{getUrl('act','dispMemberInfo','mid', $layout_info->signup_mid)}<[email protected]>{getUrl('act','dispMemberInfo')}<[email protected]>">마이페이지</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">&nbsp;</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

如果你在談論它固定到瀏覽器的底部即使在頁面滾動時,也不能在沒有'position:fixed'的CSS中完成 - 你必須使用javascript。 – CupawnTae

+0

@CupawnTae否,如果內容長度很長,頁腳不應該在屏幕上可見。向下滾動,他們會出現。這是好的 – JuntaeKim

+1

你有什麼理由要避免'position:fixed;'?? –

回答

-2

請檢查您的頁腳給予相對位置:

'http://jsfiddle.net/p4r5asqr/1/' 
+0

http://jsfiddle.net/p4r5asqr/1/ – Vinayak

+2

頁腳*在問題 – CupawnTae

+0

中有*位置:相對值請檢查以下鏈接: http://jsfiddle.net/05Ldykjm/4/ – Vinayak