1

我试图在页面底部添加一个粘性页脚，并在页面顶部添加一个实心页眉。但是我在使用 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 高度有关。在此先感谢您的帮助！

4

3 回答 3

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/

于 2013-03-17T15:16:38.370 回答
0

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

#footer {
position:fixed;
bottom: 0;
background-image:url(pics/bg_footer.png);
background-color:#FF0;
height:150px;
width: 100%;
}
于 2013-03-17T16:09:36.110 回答
0

我做了一个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>

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

;D

于 2013-04-12T17:25:40.910 回答