使用服務器端包含頁面底部的頁腳

我有一個網站，我嘗試創建包含多個頁面的網站。我正在使用服務器端包含轉儲在每個頁面的標題和網站內容欄，所以我不必在每個頁面中包含HTML。使用服務器端包含頁面底部的頁腳

我得到了一個點，我想包括一個頁腳，並且正在努力如何強制頁腳到頁面的底部，並嘗試了很多Stack Overflow上找到的建議，或者我失蹤某件事或需要嘗試不同的事情。

似乎幫助內容的高度（使用JQuery手風琴）沒有考慮到......？或者我沒有正確的格式將頁腳推到頁面的底部而不是屏幕。

也許有一個更好的方法來完成我正在嘗試完成的任務（爲每個頁面拉頁眉和頁腳而不必複製HTML），或者我從HTML和/或CSS中丟失了一些東西。

包含頁腳欄的示例頁面可以找到here。

樣的HTML的頁面上方的低於...

<body> 

<div class="page-content"> 

<!--#include file="../../../_includes/header.shtml"--> 

<div class="container"> 
    <h2 class="container-header">About Widget</h2> 
    <div> 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
    </div> 
    <div class="widget-header-figure-container"> 
     <figure> 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
     </figure> 
    </div> 
    <div> 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
    </div> 

</div> 

<footer> 
<!--#include file="../../../_includes/footer.shtml"--> 
</footer> 

</div> 

</body>

樣品CSS低於：

html { 
    font-size: 62.5%; 
    height: 100%; 
} 

body { 
    background-color: #d2d2d2; 
    font-family: 'Cuprum'; 
    height: 100%; 
} 

.page-content { 
    min-height: 100%; 
    position: relative; 
} 

#footer-container { 
    width: 100%; 
    height: 150px; 
    background-color: #797986; 
    bottom: 0; 
    position: absolute; 
    text-align: center; 
}

來源

2017-05-04 boyle.matt

我就從body和html刪除height，適用於min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box到.page-content給它的高度，而不是清除浮動導航，墊底部爲腳註留出空間，並保持填充從高度延伸到100vh + 150px。我還將您的footer選擇器更改爲footer而不是id，因爲id不在您的代碼中。

html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    background-color: #d2d2d2; 
 
    font-family: 'Cuprum'; 
 
    margin: 0; 
 
} 
 

 
.page-content { 
 
    min-height: 100vh; 
 
    position: relative; 
 
    overflow: auto; 
 
    padding-bottom: 150px; 
 
    box-sizing: border-box; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: #797986; 
 
    bottom: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
}

<body> 
 

 
<div class="page-content"> 
 

 
<!--#include file="../../../_includes/header.shtml"--> 
 

 
<div class="container"> 
 
    <h2 class="container-header">About Widget</h2> 
 
    <div> 
 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
 
    </div> 
 
    <div class="widget-header-figure-container"> 
 
     <figure> 
 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
 
     </figure> 
 
    </div> 
 
    <div> 
 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
 
    </div> 
 

 
</div> 
 

 
<footer> 
 
    footer 
 
</footer> 
 

 
</div> 
 

 
</body>

來源

2017-05-04 21:40:07

太感謝你了，更改到CSS工作太棒了！我對HTML和CSS相當陌生，只是好奇主要問題是什麼？ –

將'height：100％'定義爲'html，body'實際上使瀏覽器視口的高度爲100％。你通常要使用'html {height：100％; }'和'body {min-height：100％}'，而我發現在內容元素上使用'min-height：100vh'效果最好。而浮動的邊欄沒有清除，所以父母的高度不尊重邊欄的高度。查看「css clearfix」以瞭解更多信息。 –

使用服務器端包含頁面底部的頁腳

回答

相關問題