<body>と<footer>の重複を修正/防止する方法は？

-2

私は試しました：固定/静的/相対/絶対...身体にまだ重複しています&時にはフッタ（身体の他の部分をブロックする）。<body>と<footer>の重複を修正/防止する方法は？

画像：完全なコード（画像中のエラー）のため

/* Footer */ 
 

 
footer { 
 
    background: #444; 
 
} 
 

 
.h-sec { 
 
    font: 22px Arial, Helvetica; 
 
} 
 

 
.sec { 
 
    font: 9px, Arial, Helvetica; 
 
} 
 

 
#f-nav a { 
 
    color: #F4F4F4; 
 
} 
 

 
#f-nav .current { 
 
    color: #A9A9A9; 
 
    text-decoration: underline; 
 
} 
 

 
.a-void { 
 
    color: #000000; 
 
}

<footer> 
 
    <section class="f-sec1"> 
 
    <h5>CAD | Tech Website&copy;</h5> 
 

 
    <br> 
 
    <div id="f-nav"> 
 
     <a href="index.html" class="current">Home</a> 
 
     <a href="services.html">Services</a> 
 
     <a href="contact.php">Contact</a> 
 
     <a href="about.html">About us</a> 
 
    </div> 
 

 
    </section> 
 

 
    <section> 
 
    <a href="####.com" class="a-void">Donate :)</a> 
 
    </section> 
 
</footer>

：https://jsfiddle.net/s0nk37cg/ - ITはFINE LOOKますが、画像がないからです、ご覧下さいイメージを作成して、わかりやすく表示することをお任せします。

出典

2017-08-11 Aegir Aideron

フロートをクリアする必要があります。 :) https://css-tricks.com/all-about-floats/ :) 'clear：both;' –

何が浮かんでいますか？質問に[mcve]を含める必要があります – Quentin

あなたの質問の一部を太字と大文字で入力しないでください。また、単に静的、固定、相対、絶対のいずれかの位置にフッターを設定しても問題は解決しません。 –

これを試してみてください：

ステップ1 - あなたのCSSに以下を追加します。

.clearfix:after {content:""; display:table; clear:both;}

ステップ2 - あなたのhtmlでの変更点：変更：

<section id="container" >

を〜〜

 <section id="container" class="clearfix">

もし助けがあれば、マージンやパディングをtweekする必要があるかもしれません。

出典

2017-08-11 10:35:43 SoneaV

-1

シンプルフィックスこの問題は、ページまたはスクロールの最後にオーバーラップが発生しないように、body要素にマージンボトム値を与えることです。フッターの高さに応じて値を指定します。

出典

2017-08-11 10:15:38

ここに私が更新したいくつかのものがあります。 body margin-bottomのインラインスタイル（フィディッドで外部CSSを使用していないため）フッター要素の位置、幅、上端および下端の値。 https://jsfiddle.net/s0nk37cg/1/ –

<body>と<footer>の重複を修正/防止する方法は？

答えて

関連する問題