テキストが終了する前にフッタの背景が停止する

ウェブサイトの最後にフッターがありますが、何らかの理由でテキストが終了する前に停止しています。テキストが終了する前にフッタの背景が停止する

#footer { 
 
    background-color: #565656; 
 
    color: white; 
 
    text-align: left; 
 
    padding: 1% 5%; 
 
    height: 10%; 
 
}

<div id="footer"> 
 
    <span style="float:left;"> 
 
    <b>Contact Us</b><br/> 
 
    Email: [email protected]<br/> 
 
    Contact Phone: +86-769-xxxxxxxx<br/> 
 
    Contact Fax: +86-769-xxxxxxxx<br/> 
 
    Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/> 
 
    </span> 
 
    <span style="float:right;"> 
 
    <b>Follow Us</b><br/> 
 
    </span> 
 
</div>

出典

2016-03-27 Crimson-Med

フロートをクリアする必要があります。フローティングボックスはフローから取り出され、親ボックスには影響しません。すべての子をフローティングにすると、親が空になり、ゼロの高さに倒れます。

#footer { 
    overflow: auto; 
}

又は

#footer:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

出典

2016-03-27 14:07:12 Stickers

ありがとう非常に私はそれが両親に影響しなかったことを完全に忘れてしまった。完璧に動作します。ありがとう！ –

問題を特定するには、ブラウザの検査機能を使用してみてください。（右クリック→検査）。

おそらく高さを制限しているためです。

出典

2016-03-27 14:03:43

#footer{ 

background-color: #565656; 
    color: white; 
    text-align: left; 
    padding: 37px; 
    height: 22%; 
    }

出典

2016-03-27 14:05:04 Ajay

以下

#footer { 
     background-color: #565656; 
     color: white; 
     text-align: left; 
     padding: 1% 5%; 
     height: auto; /* MODIFICATION */ 
     position: absolute; /* MODIFICATION */ 
    }

position:absolute;を作成し、変更するあなたは、問題を引き起こしている％でパディングを使用していて、高さがあるheightへauto

#footer { 
 
    background-color: #565656; 
 
    color: white; 
 
    text-align: left; 
 
    padding: 1% 5%; 
 
    height: auto; 
 
    position: absolute; 
 
}

<div id="footer"> 
 
<span style="float:left;"> 
 
<b>Contact Us</b><br/> 
 
Email: [email protected]<br/> 
 
Contact Phone: +86-769-xxxxxxxx<br/> 
 
Contact Fax: +86-769-xxxxxxxx<br/> 
 
Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/> 
 
</span> 
 
<span style="float:right;"> 
 
<b>Follow Us</b><br/> 
 
</span> 
 
</div>

ここで動作していますJSFIDDLE：https://jsfiddle.net/0op795ct/

出典

2016-03-27 14:06:52 AVI

問題は、それらの容器の高さを計算する際にフローティング要素が無視されるということです。

私の意見では、レイアウトを少し変更して、左のスパンからfloat: leftを削除するのが最も良い解決策です。

<div id="footer"> 
<span style="float:right;"> 
<b>Follow Us</b><br/> 
</span> 
<span> 
<b>Contact Us</b><br/> 
Email: [email protected]<br/> 
Contact Phone: +86-769-xxxxxxxx<br/> 
Contact Fax: +86-769-xxxxxxxx<br/> 
Company Address: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br/> 
</span> 
</div>

出典

2016-03-27 14:13:48 bumpy

テキストが終了する前にフッタの背景が停止する

答えて

関連する問題