2016-08-22 2 views
3

私のフッタは、それが想定されているものよりもはるかに大きく(通常、その中にあるテキストと同じサイズです)、なぜ、私はデフォルトのサイズを変更するためのコードを追加していないのですか。ここで私のフッターはなぜそんなに大きいのですか?

はHTML

<header></header> 
<nav></nav> 

<div class="reservations"></div> 

<table style="width:100%" class="schedule"></table> 

<div class="sections"> 
    <section class="inner"></section> 
    <section class="right"></section> 

    <div class="capacity"> 
     <table class="capacity"></table> 
    </div> 
</div> 

<footer>Hamilton Confrence Center || 8711 West Lane, Hamilton || (513) 555-7911</footer> 

そして、これはまだ、これは何を私のフッターのCSS

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; 
} 

の内側にあるものすべてです内のページの基本的なレイアウトでありますページは現在見えます(見えにくい場合はフッターのテキストに丸で囲まれています)。

enter image description here

そして、あなたが見ることができるように、フッタの背景色が良くフッターのテキストの上部の上に延びます。あなたに聞く人のために、フッターの上にあるセクションの背景色をアクアマリンに変更したことはありません。デフォルトでは白です。

EDIT:右:

+0

は、あなたが問題を複製するためのフィドルを作成することができ、問題を修正していますか? –

+1

投稿したコード([demo](https://jsfiddle.net/yaxnnzma/))からエラーが再現されません。私はクリアされていない浮動小数点数があると推測していますが、私たちは不完全なコードの部分にアクセスすることはできません。 –

+0

クロムでページを開きます。フッターを検査します。バウンディングボックスが本当にページをカバーしていることと、計算されたスタイルが期待どおりであることを確認してください。残りのページを調べます。計算されたCSSの背景色を確認します。それがアクアマリンの場合、計算された値がどこから来ているかを確認してください。他の要素のバウンディングボックスや浮動小数点のスタイルなどをチェックしてください。同様のデバッグもFirefoxで行うことができます。これはあなたにヒントを与えるはずです。 –

答えて

2

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; 
    clear: both; 
} 

footer { 
    text-align: center; 
    background-color: aquamarine; 
    color: white; } 

を変更するには、

+0

のHey @ Liam-emeryさん、あなたの問題が修正されました。 StackOverflowは、誰かからの正解が受け入れられるQ&Aスタイルで動作します。あなた自身の質問に答えるのに間違っていることはありませんが、回答を受け入れて解決策を見つけるのを助けたときにそれをアップアップしてください、これは彼らにいくつかの「評判」を与えます - 報酬がサイトの他の人を助けることを指摘します – Kimmax

+0

@Kimmax私の答えがあなたが指しているものなら、私のもの以外のものです。これは受け入れられるものでなければなりません。 –

1

ご予約内容のdivあなたのフィドルからCSSでフッターに問題をclear: both;を修正追加することが浮いています。フッターの前にフロートをクリアします。簡単に電話で申し訳ありません。

関連する問題