2016-03-30 11 views
1

私は、提出した提案を感謝して試しているジレンマを持っています。私はテーマを使用してwordpressを実行しているlocalhostを持っているThe Fox。私はフッターを除いてすべてが完璧に走っています。Wordpressのフッターをページの最後に置く

コンテンツはページを拡張しないものもあれば、ページを超えて拡張するものもあります。問題は、テキストが終わるところでフッターが正確に始まり、ビューのために空白を追加したくないということですポートの相違点。以下に示すように、小さなコンテンツのサンプルページのスクリーンショットがあります。

Screenshot of Sample Page

私はあなたがページの中央にフッタを取って、画面にもありフッター、後に余分な空白を気づい願っています。

コンテンツの長さや画面のサイズに関係なく、ページの末尾にフッターを配置します。

CSS内にはフッターセクションがあり、Pastebinにありますが、最も重要なのは以下のとおりです。ペーストビンでも...フッターに

{ 
bottom:0px; 
right:0; 
left:0; 
overflow:auto; 
padding:0px; 
min-height:70px!important; 
height:auto; 
position: relative; 
z-index: 9000;} 

フッター、私はちょうど単一の列を使用していると私はこのコードがあることを扱いだと思います。

.footer_1_col .widget_wrap 
    { 
width:100%!important; 
float:none!important; 
margin-left:auto!important; 
margin-right:auto!important; 
padding-right:10px!important; 
} 

とフッターの種類に、私は、コードを使用するタイプ8を、使用します。

/************************************************** 
Footer Type 8 

**************************************************/ 
    .footer_type_8 .widget_wrap { 
    margin: 10px 0px 0px 0; 
    } 
    .footer_type_8 .widget { 
    margin:0px 0px 0px 0; 


} 
.footer_type_8 .widget h2 { 
font-size:10px; 
text-transform:uppercase; 
font-weight:900; 
letter-spacing:normal; 
line-height:14px; 
margin-bottom:0px; 
padding-left:0px; 
position: fixed; 
} 
.footer_type_8 .widget_line { 
display:none; 
} 

何を私が間違ってやっていると、どこで変更を加える必要がありますしてください?他のコードを参照する必要がある場合は、私に知らせてください。私はpastebinに投稿します。

ありがとうございました。

+0

フッタの上のコンテンツを囲むコンテナに 'min-height:95vh'を入れてみます。 – firasd

+0

@firasd私はそれを行いましたが、すべてのページに空白を追加しました。 –

+0

フッタを押し下げるのに十分な内容の偶数ページ? – firasd

答えて

0

これを可能にした彼のコメントのために@Firasdに特別なおかげです。

ブラウザインスペクタを使用してbody要素を探し、ヘッダとフッタの既知の静的高さを使用してその要素のサイズを再計算するだけでした。

この

は、テーマがBakerlyビジュアルコンポーザを使用していますページのCSSセクション

html,body {height:100%;}#fw_c { min-height: calc(100vh - 162px);} 

に加え、私はちょうど私が変更したいページに上記のコードを追加する必要がありました。

スライダがある場合は、スライダが行要素にある場合を除いて、スライダを計算に配置する必要があります。

関連する問題