页眉和页脚冲突答案

【问题标题】：Header and footer conflict页眉和页脚冲突
【发布时间】：2013-03-05 22:00:32
【问题描述】：

我试图在页面底部添加一个粘性页脚，并在页面顶部添加一个实心页眉。但是我在使用 body 和 html 类时遇到了一些困难。我的页眉距页面顶部的高度为 100px，我的 html 和 body 类的高度为 100%，而我的页脚为 150px。我已经在我的页面中正确地编写了页脚，所以它会粘在底部，但是 html 或正文的 100% 高度将它放置在我的页面下方，这样即使没有，你也必须滚动才能看到页脚文字把它推到那么远！这是我的 CSS 代码：

html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}

body {
height:100%;
margin:0;
padding:0;
}

.wrapper {
min-height:100%;
}

.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}

.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}

.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}

这是我的 HTML 代码：

<body>
<div class="wrapper">
    <div class="header">
</div>
<div class="main">
    <p>I can write here</p>
</div>
</div>
<div class="footer">
    <p class="alignleft">© Tim</p>
    <p class="alignright">17 maart 2013</p>
</div>
</body>

我几乎可以肯定它与 100% 的 html 高度有关。提前感谢您的帮助！

【问题讨论】：

标签： html css header height footer

【解决方案1】：

你可以试试这个：

<body>

    <div class="header"></div>
    <div class="main">
      <p>I can write here</p>
    </div>

    <div class="footer">
      <p class="alignleft">© Tim</p>
      <p class="alignright">17 maart 2013</p>
    </div>

</body>

这符合您的需要吗？

CSS

html {
  height:100%;
  background: url(pics/bg.png) no-repeat top center fixed;
  margin:0;
  padding:0;
}

body {
  padding:0;
  margin:0;
}

.header {
  background:#FFF url(pics/header.png) no-repeat top center fixed;
  height:100px;
  width:100%;
}

.main {
  position:absolute;
  top:100px;
  bottom:150px;
  overflow:auto;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom:0;
    background-image:url(pics/bg_footer.png);
    height:150px;
    width:100%;
    margin:0 auto;
    clear:both;
}

查看 JSFiddle 示例：

http://jsfiddle.net/2SL7c/

【讨论】：

非常感谢！多亏了你，我现在才开始工作，我唯一需要改变的就是再次将宽度更改为 1000px（html 和标题除外）并添加 left:0 和 right:0 以便 div 将再次保持在页面的中心！ HTML 部分以这种方式工作 :)

【解决方案2】：

让页脚也被固定怎么样？ 我做了这个jsFiddle，看看。我将您的 div 更改为 ID 而不是类（因为它们是唯一的并且应该只出现一次）。

#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}

【讨论】：

【解决方案3】：

我做了一个javascript函数来解决这个问题

<script type="text/javascript">
        $(window).bind("load", function () {
            var distance = 20;
            var header = $("#header");
            var posContent = header.position().top;
            posContent = posContent + header.height() + distance;

            var content = $("#content");
            content.css({ 'top': posContent + 'px' });
            var posFooter = content.position().top;
            posFooter = posFooter + content.height() + 200;

            var footer = $("#footer");
            footer.css({ 'top': posFooter + 'px' });
        })
    </script>

我的 CSS 看起来不错

#footer{
            background-color: #E6E6E6;
            background-repeat: repeat;
            bottom: 0;
            height: 100%;
            pointer-events: none;
            position: absolute;
            width: 100%;
            height:50px;
            z-index: -1;
        }

        #header{
            background-color: #E6E6E6;
            background-repeat: repeat;
            height: 100%;
            pointer-events: none;
            position: absolute;
            top: 5px;
            width: 100%;
            height:50px;
            z-index: -1; 
        }

        #content{
            pointer-events: none;
            position: absolute;
            width: 100%;
            z-index: -1; 

        }

终于

html代码

<div id="header">your content</div>
<div id="content">your content</div>
<div id="footer">your content</div>

无论内容多么出色，都能完美运行

【讨论】：