どうすれば私のウェブサイトの下部に空白を入れることができるので、フローティングdivは決して重複しません。

Question

空白を取り除くことに関するスタックオーバーフローに関する多くの質問がありましたが、それで。

私は自分のサイトにページが浮かぶようなボトムナビゲーションを持っていますが、ウィンドウが小さければページの下部が隠れてしまいます。一番下に白い空白を挿入したいので、ページの長さよりもウィンドウのサイズが小さい場合でも、それを読むことができます。

私が追加しようとしました

：トップページのコンテンツを含むdiv要素に

margin-bottom: 50px; 
padding-bottom: 50px; 

が、それは動作しません。

紛失しているものがありますか？ここではデモンストレーションです：http://www.writingprompts.net/name-generator/

Answer 1

#left, #right { 
    margin-bottom: 90px; 
} 

または

#top_section > div { 
    margin-bottom: 90px; 
} 

あなたは絶対的に使用しているためそれは#top_sectionでは動作しませんので、内容が実際以上のdiv自体を拡張しますが、私を信頼し、それらのいずれか

#top_section { 
    overflow: hidden; 
    padding-bottom: 90px; 
} 

：2つのCSSは私はあなたが単純に次のルールを追加します

Answer 2

に動作します与えました

これにより、#top_sectionはその内部のフローティングコンテンツほど大きくなります。

Answer 3

http://jsfiddle.net/rlemon/fSYmu/これは、あなたのレイアウトがどのように見えるかわからない（私はデモがあなたのものであると仮定するつもりはありません...あなたが修正して私に教えない限り）どのように表示されるのですかこの

HTML

<div class="container"> <!-- main page wrapper --> 
<div class="content"> <!-- main content wrapper, backgrounds apply here --> 
    <div class="inner-content"> <!-- content inner, where your content goes! --> 
    content 
    </div> 
</div> 
<div class="footer">footer</div> <!-- footer --> 
</div> 

CSS

​html,body,.container { 
height: 100%; margin: 0; padding: 0; // I am important so the page knows what 100% height is. 
} 

.content { 
height: 100%; // see above... i need to cascade down. 
background-color: green; 
} 
.content-inner { 
padding-bottom: 100px; // offset for the footer. 
} 
.footer { 
width: 100%; 
position: absolute; // stick me to the bottom. 
bottom: 0; 
height: 100px; 
background-color: red; 
} 

だろう

enjoy！

Answer 4

これを達成するには、CSSで固定位置を使用する必要があります。

HTML：

<div id="top-section"> 
    Insert content here... 
</div> 
<div id="bottom-nav"> 
    <div id="content"> 
     Bottom content... 
    </div> 
</div> 

CSS：

#bottom-nav { 
    bottom: 0; 
    position: fixed; 
    width: 100%; 
} 

#content { 
    margin: 0 auto; 
    width: 960px; 
}