Липкий нижний колонтитул не работает, и моя правая колонка сходит с ума - PullRequest
Новая
       29

Липкий нижний колонтитул не работает, и моя правая колонка сходит с ума

0 голосов
/ 24 октября 2011

Я хочу использовать липкий нижний колонтитул в этой структуре, может кто-нибудь написать код для меня, потому что я испробовал много методов, но ни один из них не работает идеально для меня ....... 

<body>
  <div id="wrapper">
    <div id="header">
      <div id="logo"></div>
      <div id="appoint">
        <ul>
          <li>info@company.com </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, это проблема, с которой я сталкиваюсь ........

1 Ответ

2 голосов
/ 24 октября 2011

ОК, вам нужен следующий стиль: 

<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>

С уважением,

...