我已成功测试了我的Moodle 2.9x自定义主题中的粘性页脚实现,该主题适用于Chrome 46,Win / Linux FireFox 31-39,IE 8/9/10/11& Edge,Android 4.2 +,Opera 33+等。不幸的是,Safari正在所有布局的底部创建块空间。例: Safari moodle theme sticky footer problem
我发现如果你注释掉这一行:
<?php echo $OUTPUT->standard_end_of_body_html(); ?>
然后,页脚会在Safari中粘贴所有苹果设备(移动/桌面设备)和所有其他浏览器。这一行添加了我需要的user_menu()的Javascript / Jquery代码。有人可以帮助发现页面中注入的内容会导致页脚反弹并且不会粘到页面底部吗?
columns1.php 布局代码:
<?php $html = theme_ksumoodle_get_html_for_settings($OUTPUT, $PAGE);
echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes(); ?>>
<head>
<title><?php echo $OUTPUT->page_title(); ?></title>
<link rel="shortcut icon" href="<?php echo $OUTPUT->favicon(); ?>" />
<?php echo $OUTPUT->standard_head_html() ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body <?php echo $OUTPUT->body_attributes(); ?>>
<?php echo $OUTPUT->standard_top_of_body_html() ?>
<?php require_once(dirname(__FILE__) . '/includes/header.php'); ?>
<div id="page" class="container-fluid">
<div id="page-content" class="row-fluid">
<section id="region-main" class="span12">
<?php
echo $OUTPUT->main_content();
?>
</section>
</div>
</div>
<?php require_once(dirname(__FILE__) . '/includes/footer.php'); ?>
<?php echo $OUTPUT->standard_end_of_body_html(); ?>
</body>
</html>
footer.php代码:
<footer>
<?php echo $OUTPUT->login_info(); ?>
<div class="ksuseparator"><!-- gold bar separator --></div>
<div class="ksucopyright">University Copyright</div>
</footer>
CSS代码:
html, body {
font-family:'Nunito',Arial,Helvetica,sans-serif;
font-weight:300;
padding:0;
margin:0;
border:0;
height:100%;
}
body {
background: none repeat scroll 0 0 #fff;
display:table;
width:100%;
overflow-y:scroll;
}
footer {
color:#fff;
display:table-row;
height:1px;
background:none repeat scroll 0 0 #000;
}
仅显示与粘性页脚实现相关的代码。参考https://www.youtube.com/watch?v=Upc_fwaiosg。请不要参考ryanfait或其他粘性页脚网站。在发布此处之前,我已经在网上搜索了很多内容,并且由于Moodle在页脚处插入脚本标记而没有解决方案,因此问题源于此。 Ryan fait和其他人是没有PHP脚本的基本网页解决方案,所以他们不能工作。