サーバー側を使用してページの下部にフッターを保存する

作成しようとしているサイトが複数あります。私は各ページに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

私は.page-contentへのmin-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-boxを適用し、bodyとhtmlからheightを削除します代わりに高さを与え、浮動ナビゲーションをクリアし、フッターのためのスペースを確保するために底を埋め、そのパッドが高さを100vh + 150pxに伸ばしないようにします。 idがコードに含まれていないため、idではなく、footerセレクタをCSSのfooterに変更しました。

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」を参照してください。 –

サーバー側を使用してページの下部にフッターを保存する

答えて

関連する問題