5

空白の削除に関するスタック オーバーフローに関する多くの質問を見つけましたが、それを挿入する方法がわかりません。

私のサイトには、ページと共にフローティングするボトム ナビゲーションがありますが、ウィンドウが小さい場合、ページの下部が隠れてしまいます。下部に空白を挿入したいので、ウィンドウがページの長さよりも小さい場合でも読むことができます。

私は追加しようとしました：

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

トップページのコンテンツを含む div に移動しますが、機能しません。

足りないものはありますか？ここにデモンストレーションがあります: http://www.writingprompts.net/name-generator/

4

4 に答える 4

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

また

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

絶対値を使用しているため、コンテンツは実際には div 自体を拡張しているため、#top_section では機能しませんが、信頼してください。私が提供した 2 つの css のいずれかが機能します

于 2012-04-20T16:58:27.890 に答える
2

次のルールを追加するだけです。

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

これは#top_section、その中のフローティング コンテンツと同じ大きさになります。

于 2012-04-20T16:59:24.617 に答える
1

http://jsfiddle.net/rlemon/fSYmu/これは単純化された例であり、レイアウトがどのように見えるかわかりません (デモンストレーションがあなたのものであるとは想定しません...修正して教えてくれない限り) i私がこれを行う方法をお見せします

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;   
}

楽しい！</p>

于 2012-04-20T17:02:22.733 に答える
0

これを実現するには、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;
}
于 2012-04-20T17:05:15.030 に答える