页眉和页脚冲突

我想在页面顶部使用一个可靠的页眉在页面底部粘滞页脚。但是我在body和html类中遇到了一些困难。我的头部距页面顶部高度为100px，我的html和body类的高度为100％，我的页脚为150px。我在页面中正确地写了页脚，所以它粘在底部，但html或body的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高度..预先感谢您帮帮我！

来源

2013-03-17 Peleus

你可以试试这个：

<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-17 15:16:38 freshbm

感谢一大堆！我现在得到了它的工作，谢谢你，只有我不得不改变的是1000px的宽度（除了HTML和标题），并添加左：0和右：0，所以div将留在页面的中心！ HTML部分以这种方式工作:) – Peleus 2013-03-17 16:17:42

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

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

来源

2013-03-17 16:09:36

我做了一个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-12 17:25:40

页眉和页脚冲突

回答

相关问题