固定页眉和页脚不允许页面内容滚动 - Fixed Header and Footer not allowing page content to scroll?

Fixed Header and Footer not allowing page content to scroll?

本文关键字：不允许滚动 | 更新日期: 2023-09-27

我目前正在使我的页眉和页脚固定，而我的页面内容滚动。我的身体溢满了;目前。当我删除它时，我可以滚动页面，但是，我的页眉不再固定在顶部，我的页脚仍然覆盖了页面内容的最后一部分。我将通过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;
}