頁眉和頁腳衝突

我想在頁面頂部使用一個可靠的頁眉在頁面底部粘滯頁腳。但是我在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

頁眉和頁腳衝突

回答

相關問題