Question

我正在努力使我的页眉和页脚在我的页面内容滚动时固定。我的身体溢出：隐藏;目前。当我删除它时，我可以滚动页面，但是，我的标题不再固定在顶部，我的页脚仍然覆盖了我的页面内容的最后一点。我正在通过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>

Answer 1

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;
}

固定页眉和页脚不允许页面内容滚动？

1 个答案: