我目前正在努力在页面内容滚动浏览时固定页眉和页脚。我的 body 已经溢出:隐藏；现在。当我删除它时，我可以滚动浏览页面，但是，我的页眉不再固定在顶部，我的页脚仍然覆盖我页面内容的最后一点。我正在通过 php 提取内容。如何让我的页眉和页脚固定在页面上，但仍然让我的 PHP 动态内容完整显示？
我的代码:
CSS:
body {
margin: 0;
padding: 30px 0 40px 0;
overflow: hidden;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: red;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: white;
}
#page {
overflow: auto;
height: 100%;
}
HTML:
<head id="header">
<?php
include('incl/menuinc.php');
?>
</head>
<body>
<div id="page">
<?php
if (isset($_GET['page'])) {
switch ($_GET['page']) {
case 'example_page':
include('incl/pages/example.php');
break;
default:
include('home.php');
}
}
?>
</div>
<div id="footer">
<?php
include('footer.php')
?>
</div>
</body>
最佳答案
http://jsfiddle.net/q8j208eo/2/
*{ /*basic reset*/
margin: 0;
padding: 0;
}
html, body{
position: relative;
height: 100%;
min-height: 100%;
}
#header{
background-color: #ccc;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
#footer{
background-color: #ddd;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
}
#page{
box-sizing: border-box;
min-height: 100%;
padding-top: 40px;
padding-bottom: 60px;
background-color: yellow;
}
关于php - 固定页眉和页脚不允许页面内容滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31726991/