CSS 页脚基于最小高度固定位置

2024-01-14

我看过这里和各种教程,但无法达到我需要的效果。

因此,如果页面内容高度低于 600 像素,我希望页脚固定在该高度的容器下方。

但是,如果内容将容器高度增加到超过 600 像素,则页脚应被容器向下推到页面上。

我尝试使用 min-height 来使用,我的 html 看起来像这样

<body>
<div id="shell">
<div id="container">
Content
</div>
<div id="footer">Footer</div>
</div>
</body>

我不会费心发布 CSS,因为它根本不接近。


你可以通过 CSS Trick 来做到这一点,

/* CSS 代码 */

body, html{
    padding:0;
    margin:0;
    height:100%;
}

.wrapper{
    min-height:100%;
    position:relative;
}

.container{
    width:960px;
    margin:0 auto;
    padding-bottom:100px;
}

.header{
    height:100px;
    background-color:#066;
}

.footer{
    position:absolute;
    bottom:0;
    height:100px;
    background-color:#006;
    width:100%;
}
<div class="wrapper">
    <div class="container">

        <div class="header">
            Header
        </div>

        <div class="body">

        </div>


    </div>

    <div class="footer">
        Footer
    </div>

</div>

这是我的小提琴文件 http://jsfiddle.net/8AuAn/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 页脚基于最小高度固定位置 的相关文章

随机推荐

  • 单个查询中的 Wikipedia API 和 SPARQL

    我需要搜索其中包含一些特定单词的维基百科页面全文 为了改善结果 我想将结果限制为描述实体的页面的实例一个特定的实体 为了搜索全文 我可以使用 Wikipedia API 使用查询动作和搜索生成器 为了过滤给定实体的实例 我可以使用 Wiki
  • 如何检查包含路径下是否存在文件?

    您可以使用以下命令获取 PHP 中的当前包含路径get include path 我想知道检查是否可以包含该文件而不发出 PHP 错误的轻量级方法是什么 我正在使用 Yii 框架 我想要导入而不发出 PHP 错误 但我失败了 从 PHP 5
  • 如何避免以下代码中的Java.util.IllegalStateException?

    我有一个包含重复值的整数列表 我需要做的是找到重复的整数 添加它们的值 然后通过删除找到的重复项将结果添加到列表中 这是我正在做的事情 List
  • 如何设计从行创建动态列的查询

    我有数据 Table1 ID Name 1 n1 2 n2 3 n4 Table2 FID YearS Val 1 2008 Up 1 2009 Down 1 2010 Up 2 2000 Up 2 2001 Down 2 2002 Up
  • 如何在webview_flutter中设置Cookie?

    如何在初始化时在webview flutter中设置Cookie body WebView initialUrl index url javascriptMode JavascriptMode unrestricted onWebViewC
  • 将 CoffeeScript 与 Eclipse 集成?

    有没有一种方法可以集成 CoffeeScript 和 Eclipse 以便当我在一个窗口中编写 CoffeeScript 时 另一个窗口会将编译后的代码显示为 Javascript 我会等待答案 谢谢 我已经在我的项目中使用构建器和小型 s
  • 图像权限(不希望它们出现在图库中)

    我正在开发一个将图像存储在 Android data 文件夹中的应用程序 这些图片在画廊中可见 但我不想要这样 是否可以设置文件夹的权限 以便它们只能由应用程序本身使用 或者我应该将它们存储在另一个文件夹中 创建一个名为 nomedia在文
  • 我可以将 LESS 与 Xul 一起使用吗?

    我可以用吗LESS http lesscss org 与徐尔 有人已经一起使用过它们吗 我还没见过有人使用它 但没有什么能阻止你尝试 LESS 只是一个预处理器 它输出 CSS 文件 因此您可能会发现的问题应该与您可能需要使用的 Mozil
  • 当字符串包含多个双引号时,从字符串中提取 URL 的正则表达式失败?

    我正在使用正则表达式从字符串中提取 url 它大部分工作正常 var regex new Regex a href a
  • 在 android 中从 Shoutcast Url 播放

    我正在开发一个需要播放 Shoutcast 广播的应用程序 对于API我已经遵循了这个URL http wiki winamp com wiki SHOUTcast Radio Directory API 我成功地使用我的开发者 ID 获取
  • 在 CUDA 中使用 SIMD 实现位旋转运算符

    我知道 StackOverflow 不是用来向其他人询问代码的 但让我说一下 我正在尝试在 CUDA C 设备代码中实现一些 AES 函数 在尝试实现左字节旋转运算符时 我很不安地发现没有原生 SIMD 内在功能 所以我开始了一个幼稚的实现
  • 会计和数据库设计,存储借方和贷方金额

    问题 在下面的情况下 我是否应该将所有金额存储为正小数金额 然后将该金额标记为 借方 或 贷方 而不是将借方存储为负金额 将贷方存储为正金额 在我的数据库设计中 我将 借方 存储为负金额 将贷方存储为正金额 现在 在报告中有时结果会出错 因
  • 附件动作序列(UITableViewController)

    我正在尝试通过 IB 进行 segue 当按下 tableView 中的单元格附件时切换视图 来自我的IB的图片 1 我从 tableviewcontroller 的单元格拖动到另一个视图并选择 Accessory Action gt Pu
  • 如何使用 InvokeCommandAction 调用我的方法并传入参数?

    我一直在试图弄清楚如何从Loaded 事件 我在这里问了一个问题 我将如何在 Loaded 上传递参数 https stackoverflow com questions 30488770 how would i go about pass
  • 如何通过代码判断iPad是黑色还是白色? [复制]

    这个问题在这里已经有答案了 我想知道是否有办法通过代码判断 iPad 是黑色还是白色 简单的谷歌搜索没有发现任何结果 iPhone 上的序列号为您提供了所有这些信息 您只需将颜色代码映射到颜色本身即可 iPhone SN 的典型格式如下 A
  • UIButton 将点击和滚动手势传递给 UIScrollView

    我有一个水平分页的UIScrollView with a UIButton部分覆盖滚动视图 像这样 UIView UIScrollView UIButton 我想做UIButton不触发点击按钮上方滚动并释放 我想要UIScrollView
  • Python(TKinter)中形状的随机填充颜色

    我想知道如何从列表中获取随机颜色以在draw rectangle colors red orange yellow green blue violet canvas create rectangle self x self y self x
  • redux-toolkit createSlice 可以使用 js Map 作为状态吗?

    一般来说 使用可变对象 例如Map is 强烈劝阻 https redux js org faq organizing state can i put functions promises or other non serializable
  • 在 Selenium 中每个元素使用多个定位器的优点/缺点?

    我正在测试一个仍在开发中的网站 通常 元素的 id 类 文本或 DOM 中的位置会发生变化 然后我一直使用的定位器将不再能够找到该元素 但这些功能仍然可以正常运行 我不希望在没有实际回归的情况下多次测试失败 因此 我没有为每个元素使用单个定
  • CSS 页脚基于最小高度固定位置

    我看过这里和各种教程 但无法达到我需要的效果 因此 如果页面内容高度低于 600 像素 我希望页脚固定在该高度的容器下方 但是 如果内容将容器高度增加到超过 600 像素 则页脚应被容器向下推到页面上 我尝试使用 min height 来使