粘性页脚不是那么粘

Question

我有一个带有粘性页脚的网站，它不太粘，我很难弄明白。

这是 html 部分：html.tpl.php

<?php
?>
<!DOCTYPE html>
 <head>
  <?php $head; ?>
  <title><?php print $head_title='Vit | Kringvarp Føroya'; ?></title>
  <?php if ($default_mobile_metatags): ?>
  <?php endif; ?>
  <meta http-equiv="cleartype" content="on">

  <?php print $styles; ?>
  <?php print $scripts; ?>
  <?php if ($add_html5_shim and !$add_respond_js): ?>
  <?php elseif ($add_html5_shim and $add_respond_js): ?>
  <?php elseif ($add_respond_js): ?>
  <?php endif; ?>
</head>
  <body class="<?php print $classes; ?>" <?php print $attributes;?>>
    <div class="container">
    <?php if ($skip_link_text && $skip_link_anchor): ?>
     <p id="skip-link">
       <a href="#<?php print $skip_link_anchor; ?>" class="element-invisible  
       element-focusable"><?php print $skip_link_text; ?></a>
     </p>
    <?php endif; ?>
    <?php print $page; ?>
 </div>
  <?php print $page_footer; ?>
 </body>
  <?php print $page_bottom; ?>
 </div>
</html>

和page.tpl.php部分

<div id="navigation">

   <?php print render($page['navigation']); ?>

</div>


<header class="header" id="header" role="banner">

  <?php $front_page='http://kvf.fo/vit';

     if ($logo): ?>
         <a href="<?php print $front_page; ?>" title="<?php print   
         t('Heim'); ?>"    
         rel="home" class="header__logo" id="logo"><img src="<?php print 
         $logo; ?  
          >" alt="<?php print t('Heim'); ?>" class="header__logo-image" />     
         </a>
      <?php endif; ?>

<?php if ($site_name || $site_slogan): ?>
<div class="header__name-and-slogan" id="name-and-slogan">
<?php if ($site_name): ?>
 <h1 class="header__site-name" id="site-name">
    <a href="<?php print $front_page; ?>" title="<?php print t('Heim'); 
    ?>" class="header__site-link" rel="home"><span><?php print 
    $site_name; ?></span></a>
 </h1>
<?php endif; ?>

<?php if ($site_slogan): ?>
  <div class="header__site-slogan" id="site-slogan"><?php print 
  $site_slogan; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>


<?php print render($page['header']); ?>

</header>

<div id="main">

<?php print render($page['content']); ?>

</div>

<?php print render($page['footer']); ?>
<?php print render($page['bottom']); ?>

css 部分。

html {
      position: relative;
      min-height: 100%;
     }

body {
      height: 100%;
     }

.container {
            margin: 0 0 125px;
           }

#footer {
         position: absolute;
         left: 0;
         bottom: 0;
         height: 100px;
         width: 100%;
         }

页面地址是 www.kvf.fo/vit ，它似乎工作正常，但是在 Ipad 上，页脚 "sinks" 在底部的中间屏幕令人失望，因为该站点的主要用户是 Ipad 用户：/

非常感谢任何帮助！

Answer 1

您似乎提前关闭了 body 标签：

 </div>
  <?php print $page_footer; ?>
 </body>
  <?php print $page_bottom; ?>
 </div>

Answer 2

如果您希望页脚具有粘性，请在 css

中添加此属性

footer {
  position: fixed;
}

粘性页脚不是那么粘

Sticky footer is not so sticky

html

css

footer

sticky