Сохранение нижнего колонтитула с запасом?

Я в значительной степени вижу, что все ошибки найдены до сих пор, кроме одного ... нижний колонтитул, опять же, не прикреплен к основанию. Мне пришлось удалить относительный и абсолютный метод, потому что контент будет растягиваться под нижним колонтитулом. Поэтому мне нужно каким-то образом расширить область между контентом и нижним колонтитулом динамически, чтобы нижний колонтитул был внизу. Есть ли способ сделать это? У меня есть «box-divider», установленный на 100% высоту, но, похоже, он ничего не делает.Сохранение нижнего колонтитула с запасом?

Живой код здесь http://jordan.rave5.com/tmp/

CSS

  #body { 
       transition: height 2s; 
       -webkit-transition: height 2s; 
       width: 74%; 
       min-width: 1024px; 
       height: auto !important; 
       margin: 0 auto; 
       margin-top: 20px; 
       margin-bottom: 20px; 
       padding: 10px; 
       background-color: #080908; 
       -moz-border-radius: 10px; 
       -webkit-border-radius: 10px; 
       -khtml-border-radius: 10px; 
       border-radius: 10px; 
       -moz-box-shadow: 0px 0px 6px #000; 
       -webkit-box-shadow: 0px 0px 6px #000; 
       box-shadow: 0px 0px 6px #000; 
       /* For IE 8 */ 
       -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')"; 
       /* For IE 5.5 - 7 */ 
       filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000'); 
      } 

      #body-content { 
       display: none; 
       height: 100%; 
      } 

      #box-divider { 
       width: 75%; 
       min-width: 1024px; 
       height: 100%; 
       margin: 20px auto 20px; 
      } 

      #footer { 
       width: 100%; 
       height: 150px; 
       background-image: url(images/black-trans.png); 
       background-repeat: repeat; 
       padding: 0 0 20px; 
      }

HTML

<div id="background-overlay"> 
     <div id="background-gradient"> 

      <div id="header-image-grad"> 

        <div id="header-container"> 
         <div id="header"> 
          <div id="navigation-container"> 
           <div id="navigation"> 
            <span id="nav">Navigation Area...</span> 
           </div> 
          </div> 
         </div> 
        </div> 

       <div id="header-image-border"> 
        <img class="header-img" src="slides/fields.jpg" alt="Panoramic Fields" /> 
        <div class="image-grad"></div> 
       </div> 

      </div> 

      <div id="body"> 
       <div id="body-content"></div> 
       <div class="loading"><img src="images/loading.gif" alt="Loading Content" /></div> 
      </div> 

      <div id="box-divider"> 
       &nbsp; 
      </div> 

      <div id="footer"> 
       <br /> 
       <div id="footer-content"> 
        Footer Area... 
       </div> 
      </div> 

     </div> 
    </div>

источник

2013-04-25 WASasquatch

Термин вы ищете «липкий». Поиск липкого нижнего колонтитула вернется с тонны ловушек. – Lowkase

Вы ищете что-то [подобное] (http://ryanfait.com/sticky-footer/)? –

http://stackoverflow.com/questions/16223774/content-and-footer-overlapping-and-not-pushing-footer-to-bottom Искренний совет: вы должны изучить CSS + HTML вместо того, чтобы заставить SO решить все ваши issues_ – Ejaz

Один из многих версий там ... я использую один в моих проектах

Sticky footer

Это то, что я делаю с моих сайтов

html, body {height: 100%} 

#wrap 
{ 
    min-height: 100%; 
} 

#footer 
{ 
    position: relative; 
    margin-top: -58px; 
    clear: both; 
    color: #333; 
    font-size: 10px; 
    text-align: center; 
    height: 85px; 
    background-image: url(../images/footerBG.jpg); 
    background-repeat: repeat-x; 
}

отрицательное верхнее поле, что делает трюк ...

HTML

<body> 

<div id="wrap"><!--for sticky footer--> 

    <div id="headerWrapper"></div> 

    <div id="navWrapper"></div> 

    <div id="main"> 
    <p>this is where your content fun crazy shenanigans will go</p> 
    </div><!--main or content--> 

</div><!-- STICKY FOOTER --> 

<div id="footer"></div> 

</body>

источник

2013-04-25 20:54:58 Dan

Я реализовал код, но он ничего не сделал, чтобы поддерживать нижний колонтитул, и просто засунул ногу в прямое основание тела. http://jordan.rave5.com/tmp/ Я думаю, что проблема может заключаться в использовании контейнеров с несколькими страницами для градиента и текстуры. Я пробовал четыре метода, которые абсолютно ничего не делают, поэтому что-то еще не позволяет правильному выполнению кода. – WASasquatch

вам нужно добавить обертку, в которой будет находиться липкий нижний колонтитул, - просто добавьте дополнительную обертку, которая обертывает всю вашу страницу, - все, что она сделает, это позволить нижнему колонтитулу придерживаться нижней части страницы. – Dan

У меня уже есть два с фоном, градиентом и фоном. edit: О, я думаю, я вижу, thasnks для объяснения! – WASasquatch

Сохранение нижнего колонтитула с запасом?

ответ

Смежные вопросы