css - 我的背景颜色渗入页面底部,我希望我的页脚颜色在不滚动时填充底部

标签 css background footer

这是一个例子... http://imgur.com/5mcCB

页面内容不多,所以高度很小。正文 BG 颜色填满了页面底部,甚至超过了页脚 - 这最终看起来很荒谬......

当内容很小(用户屏幕上没有滚动条)时,如何使页脚颜色完成页面?我不想为每个页面永久制作一个巨大的页脚,因为那样会让人觉得荒谬。

谢谢。

最佳答案

我会给正文和页脚相同的背景颜色,然后将您的“正文”背景颜色立即应用到正文本身内的包装元素。

<!DOCTYPE html>
<html>
  <head>
    <title>Alternative Background Method</title>
    <style>
      body, 
      body > footer {
        background: /* bgcolor */
      }
      #content {
        background: /* original body background color */
      }
    </style>
  </head>
  <body>
    <section id="content">
      <!-- main content --->
    </section>
    <footer>
      <!-- footer contents -->
    </footer>
    <!--

      Any visible space between the bottom of the viewport and the 
      footer element will have the same background as the footer
      element itself.

    -->
  </body>
</html>

关于css - 我的背景颜色渗入页面底部,我希望我的页脚颜色在不滚动时填充底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10565777/

相关文章:

html - 响应式页脚 html

html - 如何将页脚 (div) 对齐到页面底部?

javascript - 将 li 移动到下一列

html - 复制 wtikay - IE - currentStyle 在应该更新时没有更新

css - 将空间分成3个平行 block

c# - 如何从数据库读取特定文本框为文本框背景颜色着色

ruby-on-rails - Rails 最好的后台作业管理库是什么?

html - 网站页脚文本与页脚顶部不对齐

css - Logo img 使 IE 8 中的 Bootstrap 导航栏崩溃

javascript - 如何将图像预加载代码集成到我当前的代码中?