粘性页脚不起作用，让我的右栏变得疯狂

发布于 2024-12-11 10:11:49 字数 1483 浏览 0 评论 0原文

我想在这个结构中使用粘性页脚，任何人都可以为我编写代码，因为我尝试了很多技术，但没有一个对我来说完美工作......

<body>
  <div id="wrapper">
    <div id="header">
      <div id="logo"></div>
      <div id="appoint">
        <ul>
          <li>[email protected] </li>
        </ul>
      </div><!--appoint div close-->

      <div id="navi">   
      </div><!--navigation div close-->
    </div><!--header div close-->

    <div id="slidecontainer">
    </div> <!--closing tag for container-->

    <div id="feature">
      <div id="featurewrap">    
      </div> <!--feature wrap close-->
    </div> <!--feature div close-->

    <div id="leftcol">
    </div><!--leftcolumn div close-->

    <div id="rightcol">
    </div><!--right column div close-->
  </div><!--wrapper div close-->

  <div id="footer_wrap">
    <div id="footer">
      <div id="footerleft">    
      </div><!--footerleft div close-->

      <div id="footerright">  
      </div><!--footerright div close-->
    </div> <!--footer main div close-->
  </div><!--footer div close-->

此外，我还使用全宽重复背景body 和 footer_wrapper 这就是我遇到的问题........

原文

I want to use sticky footer in this structure, can anyone write the code for me cause i have tried a lot of techniques but none of them are working perfectly for me.......

<body>
  <div id="wrapper">
    <div id="header">
      <div id="logo"></div>
      <div id="appoint">
        <ul>
          <li>[email protected] </li>
        </ul>
      </div><!--appoint div close-->

      <div id="navi">   
      </div><!--navigation div close-->
    </div><!--header div close-->

    <div id="slidecontainer">
    </div> <!--closing tag for container-->

    <div id="feature">
      <div id="featurewrap">    
      </div> <!--feature wrap close-->
    </div> <!--feature div close-->

    <div id="leftcol">
    </div><!--leftcolumn div close-->

    <div id="rightcol">
    </div><!--right column div close-->
  </div><!--wrapper div close-->

  <div id="footer_wrap">
    <div id="footer">
      <div id="footerleft">    
      </div><!--footerleft div close-->

      <div id="footerright">  
      </div><!--footerright div close-->
    </div> <!--footer main div close-->
  </div><!--footer div close-->

Also i am using full width repeating backgrounds for body and footer_wrapper that is the problem i am having........

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

下壹個目標 2024-12-18 10:11:49

好的，您需要以下样式：

<style type="text/css">
* {
    margin: 0;
}

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -(<FOOTER_HEIGHT>+<FOOTER_TOP&BOTTOM_MARGIN>)px; 
    /* note the negative value */
}

#footer_wrap, .push {
    height: <FOOTER_HEIGHT>px;
}
</style>

注意底部边距中的 #wrapper 必须具有页脚底部和顶部边距的总和负值，如果您有...

在您的代码中：

<div id="wrapper">
    <!-- What ever code is here -->
    <div class="push"></div><!-- this div MUST be last div before closing of "wrapper" -->
</div>

<div id="footer_wrap">
    <!-- What ever code is here -->
</div>

问候，

OK, you need the following style :

<style type="text/css">
* {
    margin: 0;
}

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -(<FOOTER_HEIGHT>+<FOOTER_TOP&BOTTOM_MARGIN>)px; 
    /* note the negative value */
}

#footer_wrap, .push {
    height: <FOOTER_HEIGHT>px;
}
</style>

Note on #wrapper in bottom margin must have a negative value of the total of and bottom and top margins of footer if you have ...

On your code:

<div id="wrapper">
    <!-- What ever code is here -->
    <div class="push"></div><!-- this div MUST be last div before closing of "wrapper" -->
</div>

<div id="footer_wrap">
    <!-- What ever code is here -->
</div>

Regards,

回复收藏 0 原文

~没有更多了~