css - 如何在我的网站底部放置空白，使浮动 div 永远不会重叠

Question

我发现了很多关于摆脱空白的堆栈溢出问题，但我似乎无法弄清楚如何将其放入。

我的网站上有一个随页面浮动的底部导航，但如果窗口很小，则页面的底部会被覆盖。我想在底部插入一些空白，所以当窗口小于页面长度时，您仍然可以阅读它。

我试过添加：

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

到包含首页内容的 div，但它不起作用。

有什么我想念的吗？这是一个演示：http ://www.writingprompts.net/name-generator/

Answer 1

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

或者

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

它不适用于#top_section，因为您使用绝对值，因此内容实际上扩展了 div 本身，但相信我，我给您的这两个 css 中的任何一个都可以工作

Answer 2

只需添加以下规则：

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

这将使其#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;   
}

请享用！​</p>

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