粘性页脚不是那么粘
Posted
技术标签:
【中文标题】粘性页脚不是那么粘【英文标题】：Sticky footer is not so sticky 【发布时间】：2016-02-20 01:11:13 【问题描述】：我有一个带有粘性页脚的网站，它不是很粘，我很难弄清楚。
<?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; ?
>" 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 上，页脚“下沉”到屏幕底部的一半，这是一个无赖，因为主要用户该网站，是 Ipad 用户：/
非常感谢任何帮助！
【问题讨论】：
【参考方案1】：看来您要提前关闭 body 标记：
</div>
<?php print $page_footer; ?>
</body>
<?php print $page_bottom; ?>
</div>
【讨论】：
虽然语义不正确，但这不会导致固定页脚不合适。【参考方案2】：如果您希望页脚具有粘性，请在其 css 中添加此属性
footer
position: fixed;
【讨论】：
这可能还值得注意，这将要求 OP 使用<footer> html 元素，除非您的意思是 .footer 表示一个类.. 或者在 OP 的情况下.. @987654325 @
此解决方案有效....但它不会将其保留在页面底部。它保持在屏幕底部：/以上是关于粘性页脚不是那么粘的主要内容，如果未能解决你的问题，请参考以下文章