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 页脚基于最小高度固定位置 的相关文章

  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中
  • 身体动画不流畅

    下面代码中的 spaceShip 在开始按住任何箭头键时移动并不顺利 它移动一步 冻结一瞬间 然后 平稳 地移动 怎样才能让它从一开始就顺利运转 而不是 冻结 My code
  • 在 React 中切换 css 类

    如何使用布尔值切换 React 中元素上 css 类的存在 在 Angular 2 中我可以这样做 class red isRed 如何在 React 中做熟悉的事情 在 React 中 元素使用如下语法获取它们的类 div div 但请注
  • Safari 中的 css3 边框半径动画过渡不起作用

    尝试在 Safari 中对图像的边框半径进行 css3 轻松过渡 它只是有点闪烁进入悬停状态 而不是平滑过渡 任何帮助深表感谢 我的代码如下 CSS all a hover img webkit border radius 50 moz b
  • 来自 HTML5 的 Phonegap Bonjour/Zeroconf 或 Websocket IP 发现

    我正在尝试实现一个 Phonegap HTML5 应用程序 该应用程序连接到 Websocket 服务器 在嵌入式设备中运行 也有 Bonjour 服务 以在家庭网络内交换数据 我想知道使用 Phonegap 检测服务器 IP 的最佳方法
  • 先按行再按列布局 div

    我有一个容器div and 3 div里面如下 div div 1 div div 2 div div 3 div div 不知道每一个的内容div内部 但它们的高度和宽度是可变的 集装箱的高度由最高的决定div inside 我想展示这些
  • Masonry - imagesLoaded - 不是函数

    Masonry and imagesLoaded应加载并正常工作 已经制作了一个类似的网站 并且可以正常运行 我不知道我的问题出在哪里 所以我希望你能看到问题所在 应该是少了点什么 在 Chrome Inspect 中 我收到以下错误 Un
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 暂停除了已激活的玩家之外的所有其他玩家。

    我有这个插件 它可以将不同的样式应用于 html5
  • 如何隐藏div元素中太长的文本?

    如何隐藏 div 中的溢出 如果文本比 div 长 则文本将换行到新行 div style width 50px border 1px solid black test test test test div 也许是 CSS 属性text o
  • 将图像作为框架放置在 iframe 周围?

    我有一个网站尝试以移动格式显示 但在宽屏幕上 我确信 iframe 是正确的选择 我正在尝试将 iframe 加载到 iPhone 的图像中 你可以看一个例子here http webfro gs south tour iframe tes
  • 如何在codeigniter中将上传图片比例限制为16:9?

    这是我用来上传图像的代码 this gt load gt library upload ext pathinfo file name PATHINFO EXTENSION img name now ext imgConfig upload
  • 有角度的动态背景图片

    在 html 模板中 我有这种带有动态图像的样式 div style background none width 200px height 150px div 它适用于网络浏览器和 Android 浏览器 但是 使用 style 的动态背景
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 尝试将数据存储在点击器网站中

    我正在尝试存储一个名为的变量score无论何时刷新 您都会一次又一次地使用它 我不明白的是它的代码是什么 我尝试了一些方法 但似乎都不起作用 这是我的答题器网站 但是当我尝试使用 JavaScript 来存储它时 它不起作用window o
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 网站的主体和元素固定在 980px 宽度上,不会缩小

    我试图在 Rails 应用程序顶部启动前端 仅 HTML CSS 页面 但在使用 320px 视口时遇到问题 有些元素不会按比例缩小 我不明白为什么 我已经完成了检查元素 为各种元素提供了max width 100 and or width
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在 HTML 下拉列表中有一个滚动条

    我正在寻找一种在 HTML 的下拉列表中添加滚动条的方法 这样如果下拉列表包含的内容超过例如 5 项 将出现滚动条以查看其余项 这是因为我将被迫列出一些大清单 过去几个小时我一直在谷歌上搜索它 但没有运气 它需要适用于 IE8 FF 和 C
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 单个查询中的 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 来使