浮动 div,100% 高度

2023-12-14

tenter image description here

***** {

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    list-style: none;
}

#页脚渐变 {

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0 18px;
    margin-left: -18px;
    background: -moz-linear-gradient(top,  rgba(214,212,200,0.5) 0%, rgba(214,212,200,0.75) 25%, rgba(214,212,200,1) 50%, rgba(214,212,200,0.75) 75%, rgba(214,212,200,0.5) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(214,212,200,0.5)), color-stop(25%,rgba(214,212,200,0.75)), color-stop(50%,rgba(214,212,200,1)), color-stop(75%,rgba(214,212,200,0.75)), color-stop(100%,rgba(214,212,200,0.5))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(214,212,200,0.5) 0%,rgba(214,212,200,0.75) 25%,rgba(214,212,200,1) 50%,rgba(214,212,200,0.75) 75%,rgba(214,212,200,0.5) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80d4d2c6', endColorstr='#80d4d2c6',GradientType=0 ); /* IE6-9 */
    -moz-box-shadow:    inset 0 0 98px #a9a798;
    -webkit-box-shadow: inset 0 0 98px #a9a798;
    box-shadow:         inset 0 0 98px #a9a798;

}

.col {

    margin-left: 0;
    float: left;
}

.col:第一个孩子 {

    margin-left: 0;
}

.footer {

    width: 33%;
    *width: expression(Math.floor(0.33 * (this.parentNode.offsetWidth - parseFloat(this.parentNode.currentStyle.paddingLeft) - parseFloat(this.parentNode.currentStyle.paddingRight))) + "px");
}

.footer-左 {

    background-color: red;
    height: 100% !important;
    min-height: 100% !important;
}

.footer {

    background-color: red;
    height: 100% !important;
    min-height: 100% !important;
}

我想让 div.col 拉伸到 100% 高度。我尝试了一些方法,但都没有解决问题。我指望你的帮助。

提前致谢 !


  1. 设置三个元素的容器(#页脚渐变) display: table
  2. 并设置元素本身(.col) display: table-cell
  3. 去除漂浮物。
  4. Success.

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

浮动 div,100% 高度 的相关文章

  • 将自定义字体与 wkhtmltopdf 一起使用

    我正在尝试在使用 wkhtmltopdf 生成的 PDF 中使用自定义字体 我读到您不能使用 google webfonts 并且 wkhtmltopdf 使用 truetype ttf 文件 谁能证实这一点吗 所以我从 google we
  • 在每个打印页上重复水印? JavaScript 或 CSS

    所以 我有这个发票页面 我正在页面后面添加水印 我需要为要打印的每一页重复水印 问题是 我不知道会有多少页 可以有任意数量的页面 我需要在每个页面后面显示水印 这些图像取自 Google Chrome 的打印模式 这是该页面的 html 你
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • React JS - 单击时更改颜色并将默认颜色放在所有其他颜色上

    我有 x 个渲染数文章预览依赖于 API 调用的组件 div div Object keys images map index i gt return div div
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • IE8 忽略 td 宽度,适用于 IE7

    有一张表看起来像这样 table width 100 tr td td tr tr td style width 201px td td style width 100 td tr table 在除 IE8 之外的每个浏览器 包括 IE7
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 将 Div 放置在另一个 DIV 下方

    我有两个 DIV 元素 其中之一具有绝对位置 主 DIV 的左下角 第二个 DIV 是隐藏的 只有单击链接才能显示 我需要第二个出现在第一个下方 但由于第一个 div 的位置是绝对的 第二个 div 出现在第一个 div 之上 HTML 代
  • 如何修复“没有这样的文件或目录,lstat 'scss/'”?

    我正在尝试遵循 youtube 上的简单教程他尝试使用终端运行 npm 脚本 sass 文件 当我执行命令时npm 运行 sass显示错误消息错误 ENOENT 没有这样的文件或目录 lstat scss 我认为问题在于文件的路径或文件的权
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • -webkit-box-shadow 与 QtWebKit 模糊?

    当时有什么方法可以实现 webkit box shadow 的工作模糊吗 看完这篇评论错误报告 https bugs webkit org show bug cgi id 23291 我认识到这仍然是一个问题 尽管错误报告被标记为RESOL
  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx

随机推荐

  • 在php中获取memcache项的过期时间?

    我在我的网站上缓存推文 过期时间为 30 分钟 当缓存为空时 第一个找到的用户将重新填充它 然而 那时 Twitter API 可能会返回 200 在这种情况下 我想将之前的数据再延长 30 分钟 但之前的数据已经丢失了 因此 我想考虑在过
  • 在 UITableViewController 中弹出多个级别

    我希望能够从 UITableViewController 堆栈中弹出多个视图 例如 在 Apple DrillDownSave 示例中 当查看级别 3 时返回级别 1 或者当查看项目时按按钮返回级别 2 我试过 self navigatio
  • 值为 Empty 的 Variant 类型的变量如何在堆栈上表示?

    以下解释来自Rhino 开发者文档 Empty 当您在 VBScript 中声明变量时 变量的值之前 第一个赋值未定义 或者Empty Dim varValue Empty value 所以基本上 Empty说 我是一个未初始化的变体 如果
  • `int 3` 到底应该做什么?

    根据this int 3从用户空间使用来生成 SIGTRAP 但是 在用户空间下的特权下应该做什么呢 还有更多的东西可以从用户空间 SIGTRAP 生成这样的东西吗 操作码int 3对 UNIX 约定一无所知 例如 SIGTRAP Int
  • 获取Windows 8自动颜色主题的活动颜色

    在 Windows 8 中 我已将配色方案设置为自动 并将壁纸配置为在 x 分钟后更改 配色方案根据活动壁纸而变化 我正在开发一个 WPF 应用程序 并且希望在 Windows 更改配色方案以匹配当前壁纸时更改我的渐变 有没有办法获取当前
  • 解析开源服务器重置密码错误

    I updated the parse server to run on AWS and I get this error when I hit the reset password but the login works I am not
  • 是什么导致了这个属性错误?

    我一直在寻找解决方案 但还没有找到 所以这是我的代码 class snakeGame def init self pygame init self isRunning False self surface None self drawLis
  • RNetLogo 无法在 Mac Yosemite 上运行

    我刚刚尝试过此操作 但收到此错误消息 关于如何修复它有什么想法吗 我使用的是R版本3 1 1 RNetLogo 1 0 1 平台是x86 64 apple darwin13 1 0 64位 Java 7 update 60 Sys sete
  • 如何使用 CasperJS 通过自定义 POST 请求下载文件

    我正在编写一个爬虫 需要使用 POST 下载表单请求后生成的文件 我已成功将 this download url POST Params 用于常规表单 其中一个网站有许多字段使用相同的名称 从而使我无法使用常规下载方法 在尝试了很多事情之后
  • 是否有理由担心表中的列顺序?

    我知道你可以用 FIRST 和 AFTER 来改变 MySQL 中的列顺序 但是你为什么要费心呢 由于好的查询在插入数据时会显式命名列 因此真的有理由关心列在表中的顺序吗 列顺序对我调优的一些数据库 包括 Sql Server Oracle
  • 如何将Recyclerview项目保持在同一位置?

    我有以下问题 我从 Fragment 类中填充 Recyclerview 到目前为止 一切顺利 然而 当我测试我的应用程序并上下滚动填充的回收器列表时 每个项目的内容都会发生变化 也就是它们会被回收 如何保存每个项目的位置并在滚动后将其内容
  • “未找到请求的实体。” - Apps 脚本执行 API 错误

    我们有一个安装在五个 G Suite 帐户中的 Apps 脚本 我正在从 Google App Engine 中部署的 Java 代码调用应用程序脚本 我已将五个刷新令牌存储在属性文件中 并在调用 Apps 脚本之前以循环方式将它们设置在
  • Flask-sqlalchemy:连接两个数据库中的表(不同的绑定键)时遇到问题。出现错误 1146(见下文)

    我正在使用 python 和 sqlalchemy 构建 Flask Restful API 并且尝试连接来自不同数据库的两个表 看来我一次只能搜索一个数据库中的表 我错过了什么吗 from flask sqlalchemy import
  • 通配符匹配严格,但找不到元素“resources”的声明

    我知道这是重复的 你们会因此责备我 但在阅读所有帖子后我没有得到正确的解决方案 我正在尝试在 Spring Source Tool Suite 中构建 Spring 模板应用程序 我收到以下错误 org springframework be
  • QT + OpenSSL + 安卓

    我想设置 OpenSSL 库 对于我的 Qt 项目 在 Linux 下 它可以与内置的 OpenSSL 一起正常工作 我将其添加到我的 pro 文件中 LIBS lcrypto PKGCONFIG openssl 但是如果我在Android
  • CakePHP hasAndBelongsToMany (HABTM) 删除加入记录

    我在用户和位置之间有 HABTM 关系 两种型号都有合适的 hasAndBelongsToMany变量集 当我管理用户位置时 我想删除用户和位置之间的关联 但不删除位置 显然这个位置可能属于其他用户 我希望以下代码仅删除提供 HABTM 关
  • 如何处理android中的复选框ischecked和unchecked事件

    我是 android 新手 我制作了一个简单的数学应用程序 我使用复选框来选择正确的选项 但问题是答案选项不仅是一个 而且是两个 三个意味着多重选择 所以我使用复选框 chkOption setOnCheckedChangeListener
  • Swift - 检查 url asset 是否有声音

    我的屏幕破裂了 而且我的手机没有声音功能 我用相机录制了视频 当我选择视频网址时didFinishPickingMediaWithInfo我尝试检查视频是否有声音 但是player currentItem asset tracks说视频确实
  • Java Mail:在没有 SSL 的情况下在端口 25 上发送电子邮件时出现 SSLHandshakeException

    尽管我尝试在不使用 SSL 的情况下在端口 25 上发送电子邮件 但我收到了 SSLHandshakeException 下面您可以看到 javax mail Session 和 SSLHandshakeException 打印的调试消息
  • 浮动 div,100% 高度

    t webkit tap highlight color rgba 0 0 0 0 margin 0 padding 0 list style none 页脚渐变 position relative width 100 overflow h