Question

我正在尝试在页面底部获得一个粘性页脚，页面顶部有一个实心标题。但我的身体和html类有一些困难..我的标题是从页面顶部100px的高度，我的html和身体类高度为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高度有关..提前感谢您的帮助！

Answer 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/

Answer 2

如何修复页脚？ 我做了jsFiddle ，看一看。我将你的div改为ID而不是类（因为它们是唯一的，应该只出现一次）。

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

Answer 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>

无论内容多么精彩，

都能完美运作

d

页眉和页脚冲突

3 个答案: